鼠标单击时的jquery div动画答案

【问题标题】：jquery div animation on mouse click鼠标单击时的jquery div动画
【发布时间】：2013-04-25 08:28:37
【问题描述】：

我被 jquery 和 css 中的第二个简单动画困住了。当用户单击“search_TextBox”选择器时，我试图实现的目标是，带有 searchFormWrapper_01 选择器的 div 的位置从（左）-280px 到 0，动画水平缩放，效果很好但是 searchFormWrapper_01 确实回到 -280用户第二次点击...

如果条件没有响应，似乎我的其他...我相信这会是一些小错误，但我需要帮助...非常感谢

jquery:

<script type="text/javascript">

    $(document).ready(function () {

        $("#search_TextBox").click(function () {


            if ($(".searchFormWrapper_01").css("left") != 0) {
                $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
            }

            else if ($(".searchFormWrapper_01").css("left") == 0){
                $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
            }
        });
    });

    </script>

html

 <div class="container">   
    <div class="searchFormWrapper_01">
        <div class="search_form"> my content </div>
        <span id="search_TextBox">my image</span>
    </div>
  </div>

css

container {
    background-color:red;
    width:66em;
    height:375px;
    margin: 0 auto;
    position:relative;
    overflow:hidden;
}

.searchFormWrapper_01 {
    width:330px;
    height:375px;
    position:absolute;
    background-color:green;
    left:-280px;
}

.search_form {
    float:left;
    width:270px;
    height:375px;
    background-color:pink;
    margin-left:10px;
}

 #search_TextBox{ 
     float:left;
     width:50px;
     height:375px; 
     background:url("../Content/themes/base/images/searchText.png") no-repeat;
 }

演示：Fiddle

【问题讨论】：

标签： jquery html css

【解决方案1】：

我用这种方式，它工作......非常感谢大家的回应

  $(document).ready(function () {

        $("#search_TextBox").click(function () {

            $current_WrapperPostion = $(".searchFormWrapper_01").css("left");

            if ($current_WrapperPostion == -280+"px") {
                $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
            }

            else if ($current_WrapperPostion == 0+"px"){
                $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
            }
        });
    });

【讨论】：

【解决方案2】：

演示：http://jsfiddle.net/mohammadAdil/KBYP7/1/

$("#search_TextBox").click(function () {
 if ($(".searchFormWrapper_01").css("left") === '-280px'){
        $(".searchFormWrapper_01").animate({
            left: '0px'
        }, 'fast');
    } else if ($(".searchFormWrapper_01").css("left") === '0px') {
        $(".searchFormWrapper_01").animate({
            left: '-280px'
        }, 'fast');
    }
});

【讨论】：

【解决方案3】：

希望对您有所帮助http://jsfiddle.net/xSCFZ/1/ css 属性不一定是 int；你有“0px”.. How to get just numeric part of CSS property with jQuery?

parseInt http://www.w3schools.com/jsref/jsref_parseint.asp

$("#search_TextBox").click(function () {

   var left = parseInt($(".searchFormWrapper_01").css("left"),10);
        if ( left != 0) {
            $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
        }

        else {
            $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
        }

});

【讨论】：

【解决方案4】：

$(document).ready(function () {
    $("#search_TextBox").click(function () {
        if ($(".searchFormWrapper_01").css("left") != '0px') {
            $(".searchFormWrapper_01").animate({ left: '0px' }, 'fast');
        } else {
            $(".searchFormWrapper_01").animate({ left: '-280px' }, 'fast');
        }
    });
});

您的代码不起作用，因为 0 与 0px 不同。

【讨论】：

【解决方案5】：

当我做这样的事情时，我会添加一个 css 类来非常确定我的 div 的状态。

<script type="text/javascript">

    $(document).ready(function () {

        $("#search_TextBox").click(function () {


            if ($(".searchFormWrapper_01").hasClass('moved-left') ) {
                $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
                $(".searchFormWrapper_01").removeClass('moved-left');
            }

            else {
                $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
                $(".searchFormWrapper_01").addClass('moved-left');
            }
        });
    });

    </script>

添加该类的好处是，您还可以使用 css-animations。

【讨论】：

【解决方案6】：

更改您的 if 语句以比较值：

if ($(".searchFormWrapper_01").css("left") != '0px')

fiddle

.css('left') 总是会返回一个值，所以它永远不会== 0

【讨论】：

【解决方案7】：

试试

$(document).ready(function () {

    $("#search_TextBox").click(function () {
        if ($(".searchFormWrapper_01").css("left") != '0px') {
            $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
        } else if ($(".searchFormWrapper_01").css("left") == '0px'){
            console.log('a', $(".searchFormWrapper_01"))
            $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
        }
    });
});

演示：Fiddle

【讨论】：

【解决方案8】：

$(".searchFormWrapper_01").css("left") 在第一次单击后不等于 0（零），但实际上等于 0px。只需更改语句中的相等性即可。

见fiddle

【讨论】：

我尝试使用 else，但如果由于某种原因没有响应，似乎我的 else
检查我的编辑，您还必须更改第一个 if 语句 ;)
我试过 else if ($(".searchFormWrapper_01").css("left") == 0+"px"){ 但它仍然没有响应！！！
那是因为 if 语句总是正确的。 .css('left') 等于 '0px'，而不是 0（零）。所以 .css('left') 在这两种情况下都将不同于 0 ！请务必查看我原始帖子中的小提琴以查看完整的解决方案。