Question

我已经玩了一段时间jQuery，并制作了一个非常简单的隐藏效果div幻灯片效果。我将其设置为使所有div在彼此分层的相同位置，具有不同的z-index值，因此每次通过单击“翻转”按钮更改内容时，它都会动画。在初始测试中完美地工作，但无论出于何种原因，当放入不同的文档（包含所有样式表信息和html）时，单击按钮会导致内容滑入，然后向后滑出。谁能想到可能导致这种情况的原因？我查了以防万一我有多个实例，或者是否有任何代码中断，但根据我的知识，我没有这样做。以下是我正在使用的代码。

脚本

$(document).ready(function(){
    $(".flip1").click(function(){
        $(".content1").toggle("slide", {direction: "left" }, 600);
            if ($(".content2").is(":visible")){
                $(".content2").hide("slide", {direction: "left" }, 600);
            }
            if ($(".content3").is(":visible")){
                $(".content3").hide("slide", {direction: "left" }, 600);
            }
      });
    $(".flip2").click(function(){
        $(".content2").toggle("slide", {direction: "left" }, 600);
            if ($(".content1").is(":visible")){
                $(".content1").hide("slide", {direction: "left" }, 600);
            }
            if ($(".content3").is(":visible")){
                $(".content3").hide("slide", {direction: "left" }, 600);
            }
      });
    $(".flip3").click(function(){
        $(".content3").toggle("slide", {direction: "left" }, 600);
            if ($(".content1").is(":visible")){
                $(".content1").hide("slide", {direction: "left" }, 600);
            }
            if ($(".content2").is(":visible")){
                $(".content2").hide("slide", {direction: "left" }, 600);
            }
      });
});

HTML

<div class="flip1">
<img src="image/arrow.png" class="float"/><span class="c1">New page
</div>
<div class="flip2">
<img src="image/arrow.png" class="float"/><span class="c1">New page</div>
</div>
<div class="flip3">
<img src="image/arrow.png" class="float"/><span class="c1">New page</div>
</div>
<div class="content1">
START CONTENT 1
</div>
<div class="content2">
START CONTENT 2 
</div>
<div class="content3">
START CONTENT 3
</div>

风格

    .content1 {
position:absolute;
margin-top:100px;
margin-left:113px;
margin-right:60px;
width:400px;
z-index:250;
}
.content2 {
position:absolute;
margin-top:100px;
margin-left:113px;
margin-right:60px;
z-index:260;
}
.content3 {
position:absolute;
margin-top:100px;
margin-left:113px;
margin-right:60px;
z-index:270;
}

    .flip1 {
    margin-top:80px;
    margin-left:0px;
    height:20px;
    width:224px;
    float:left;
    }
    .flip2 {
    margin-left:0px;
    height:20px;
    width:224px;
    float:left;
    }
    .flip3 {
    margin-left:0px;
    height:20px;
    width:224px;
    float:left;
    }

jQuery自定义幻灯片问题

0 个答案: