Question

我正在尝试全屏缩放图片（稍后！）。为什么容器css属性margin-left在回调函数中没有改变？（请向下滚动;）

<!DOCTYPE html>
<html>
<head>
    <title>Zoom Hover</title>
        <style type="text/css">
    #container{
        margin-left:200px;
        }

    @-moz-keyframes zoom {
        0%{
            height:200px;
            width:200px;
            }
        100% {
                width: 1000px;
                height: 1000px;
                -moz-transform: translate(-200px);
            }
    }

    @-webkit-keyframes 'zoom' {
        0%{
            height:200px;
            width:200px;
            }
        100% {
                width: 1000px;
                height: 1000px;
                left:0px;
                -webkit-transform: translate(-200px);
            }
    }    

.img1 {
    width:200px;
    height:200px;

    }

.img2 {
    -moz-animation: zoom 4s;
    -webkit-animation: 'zoom' 4s;

}

</style>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('img').click(function() {
            $("#container img").addClass("img2").removeClass("img1",function(){
                        $("#container").css("margin-left","0px");});}); /*HERE WHY IS IT NOT CHANGING MARGIN-LEFT??*/
    });


    </script>
</head>
<body>
    <div id="container">
        <img class="img1" src="http://www.maplehilltree.com/CHRIST_PUNCHERS_HOOO__6_.jpg"/>
    </div>
</body>
</html>

Answer 1

如果您尝试使用此脚本该怎么办？

<script type="text/javascript">
    $(document).ready(function() {
        $('img').click(function() {
            $("#container img").addClass("img2").removeClass("img1");
                $("#container").css("margin-left","0px");
        });
    });
    </script>

编辑：如果您想在没有跳转的情况下为过渡设置动画，请尝试：

1。）使用JQuery UI更改您的javascript：

$(document).ready(function() {
        $('img').click(function() {
            $("#container").switchClass("test1", "", 1000).find("img").addClass("img2").removeClass("img1");
            /*$("#container").css("margin-left","0px");*/
        });
    });

2.。）将一个类放到容器中，这样就可以使用swithClass方法来设置动画

<body>
    <div id="container" class="test1">
        <img class="img1" src="http://www.maplehilltree.com/CHRIST_PUNCHERS_HOOO__6_.jpg"/>
    </div>
</body>

3。）从#container中删除margin-left并创建css类

.test1{
    margin-left:200px;
}

希望你喜欢它：）

想知道它是如何工作的吗？ http://jsfiddle.net/dS3Jp/

Answer 2

你不需要把它放在一个回调中，因为.removeClass()不是异步的，试一试：

$("#container img").addClass("img2").removeClass("img1");
$("#container").css("margin-left", "0px");

Answer 3

removeClass没有像这样的回调函数。它确实接受一个函数，但它不是一个回调函数。在此处阅读：http://api.jquery.com/removeClass/

您应该做的是将其更改为：

$("#container img").addClass("img2").removeClass("img1");
$("#container").css("margin-left","0px");

为了让它更短，你可以做到：

$("#container").css("margin-left","0px").find("img").addClass("img2").removeClass("img1");

Answer 4

$(document).ready(function() {
     $('img').click(function() {
         $(this).addClass("img2").removeClass("img1").parent().css("margin-left","0px");
     });
});

测试出来：http://jsfiddle.net/MarkSchultheiss/nVd9N/

编辑：加入延迟：

$(document).ready(function() {
    $('img').click(function() {
        $(this).addClass("img2").delay(2000).removeClass("img1").delay(2000).parent().css("margin-left", "0px");
    });
});

Answer 5

你的动画看起来很蠢，但是在动画完成时设置CSS，只需绑定animationEnd事件并使用回调，如下所示：

$(document).ready(function() {
        $('img').click(function() {
              $("#container img").addClass("img2").removeClass("img1");
        });
        $('#container').on("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
              $("#container").css("margin-left","0px");
        });
});

Jquery回调函数不会改变css属性

5 个答案: