Question

我有以下代码......

单击图像后，它会被动画化（例如调整大小并移动），看起来它正在翻转以显示另一个图像。当代码应用于图像时，这完全正常，但是当我想将它应用于包含

标签和更多图像的包含div时，一切都会出错。

这项工作：

<img alt="" src="image_1.jpg" id="image1" />
<img alt="" src="images_2.jpg" id="image2" />

JS

$(document).ready(function() {

    var margin = $("#image1").width()/2;
    var width = $("#image1").width();
    var height = $("#image1").height();

    $("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});

    $("#image1").click(function(e) {
        e.preventDefault();
        $(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
        window.setTimeout(function() {
        $("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
        },500);
    });

    $("#image2").click(function(e) {
        e.preventDefault();
        $(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
        window.setTimeout(function() {
        $("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
        },500);
    });

});

这不起作用

<div class="containerOne">
    <img src="image_1.jpg" alt="" />
    <img src="image_3" alt="" />
</div>

<div class="containerTwo">
    <img src="image_2" alt="" />
</div>

JS

$(document).ready(function(){
    var margin = $(".containerOne").width()/2;
    var width = $(".containerOne").width();
    var height = $(".containerOne").height();

    $(".containerTwo").stop().css({
       width:'0px',
       height:''+height+'px',
       marginLeft:''+margin+'px',
       opacity:'0.5'
    });

    $(".departmentProducts").click(function(e) {
        e.preventDefault();
        $(this).find('.containerOne').stop().animate({
            width:'0px',
            height:''+height+'px',
            marginLeft:''+margin+'px',
            opacity:'0.5'
        }, { duration:500 });
        window.setTimeout(function() {
            $(".containerTwo").stop().animate({
                width:''+width+'px',
                height:''+height+'px',
                marginLeft:'0px',
                opacity:'1'
            },{ duration:500 });
        },500);
    });

    $(".departmentProduct").click(function(e) {
        e.preventDefault();
        $(this).find('.containerTwo').stop().animate({
            width:'0px',
            height:''+height+'px',
            marginLeft:''+margin+'px',
            opacity:'0.5'
        },{ duration:500 });

        window.setTimeout(function() {
            $(".containerOne").stop().animate({
                width:''+width+'px',
                height:''+height+'px',
                marginLeft:'0px',
                opacity:'1'
            },{ duration:500 });
        },500);
    });
});

Answer 1

请参阅此jQuery插件here。命名为Flippy，似乎很轻巧。

Answer 2

您的代码看起来很好，但我认为您在div容器上使用 animate（） ，你的形象没有改变他的视觉属性，因为他的属性钢一样，我建议你查看这个链接https://api.jquery.com/animate/，看看这个简单的例子如何动画div。

   <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>animate demo</title>
    <style>
    div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
    }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
     </head>
    <body>
    <button id="go">&raquo; Run</button>
     <div id="block">Hello!</div>
      <script>
     // Using multiple unit types within one animation.
     $( "#go" ).click(function() {
     $( "#block" ).animate({
     width: "70%",
     opacity: 0.4,
     marginLeft: "0.6in",
     fontSize: "3em",
     borderWidth: "10px"
     }, 1500 );
     });
     </script>
     </body>
     </html>

希望Hepls。

jQuery翻转效果对Image / Div

2 个答案: