1

我被 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;
 }

演示：小提琴

4

8 回答 8

2

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

见小提琴

于 2013-05-01T10:37:13.970 回答
1

尝试

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

演示：小提琴

于 2013-05-01T10:37:57.100 回答
1

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

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

小提琴

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

于 2013-05-01T10:38:03.463 回答
1

演示：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');
    }
});
于 2013-05-01T10:38:52.023 回答
1

当我做这样的事情时，我正在添加一个 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 动画。

于 2013-05-01T10:39:57.603 回答
1 
$(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 不同。

于 2013-05-01T10:41:14.810 回答
1

希望这有助于http://jsfiddle.net/xSCFZ/1/ css 属性不需要 int；你有“0px”.. 如何使用 jQuery 获取 CSS 属性的数字部分？

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

});
于 2013-05-01T10:45:38.523 回答
0

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

  $(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');
            }
        });
    });
于 2013-05-01T10:54:36.913 回答