Question

我在jquery和css中遇到了我的第二个简单动画。当用户点击“search_TextBox”选择器时，我试图实现的目标，带有searchFormWrapper_01选择器的div从（左）-280px位置到水平刻度上的动画，这是完美的工作但是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

Answer 1

第一次点击后

$(".searchFormWrapper_01").css("left")不等于0（零），但实际上等于0px。只需改变语句中的相等性即可。

请参阅fiddle

Answer 2

尝试

$(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

Answer 3

更改if语句以比较值：

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

fiddle

.css('left')将始终返回一个值，因此永远不会== 0

Answer 4

DEMO：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');
    }
});

Answer 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。

Answer 6

$(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不同。

Answer 7

希望此帮助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');
        }

});

Answer 8

我使用这种方式并且它有效...非常感谢大家的回复

  $(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');
            }
        });
    });

单击鼠标时出现jquery div动画

jquery的：

HTML

CSS

8 个答案:

fiddle