无法通过右手jQuery选项卡进行正确的动画制作

时间：2012-05-16 17:27:36

标签： jquery html css

我正在使用CSS和jQuery的组合在浏览器的右侧创建一组选项卡，它的工作原理与应该有一个缺陷相同。右侧存在的图像供用户单击并使标签的其余部分滑入视图，只是“弹出”到应该的位置而不是滑动，而实际内容正确滑动。 / p>

我已尝试在tab-handle-container类上使用.animate和其他效果，但一直不成功。我已经在下面发布了我的HTML，jQuery和CSS代码，您可以提供任何提示。此外，我希望在IE8和9中有这项工作，而不是真正关心其他浏览器。谢谢！

HTML和jQuery

<script>
$(document).ready(function(){
    $(".content").hide();
    $(".myhandle").click(function(){
    $(".content", $(this).parents("li")).toggle('slide',{direction: "right"}, 1000);
    });
});

</script>


<html>
<body>
<div class="Container">
    <ul class="tab-list">
        <li>
            <div class="content">
            <h3>Contact Information</h3>
            <p>If you need technical assistance, please</p>
        </div>
        <div class="tab-handle-container">
        <img class="myhandle" src="contacttab.bmp"></img>
        </div>
    </li>
    <li>
        <div class="content">
        <h3>Some more stuff</h3>
        <p>This will be where more content is displayed</p>
        </div>
        <div class="tab-handle-container">
        <img class="myhandle" src="email.jpg"></img>
        </div>
    </li>
</ul>

CSS

html {margin: 0px;}

.myhandle { 
    cursor: hand;
}
.container {
right: -210px;
width: 240px;
height: 240px;
}
.tab-handle-container {
margin: 0px;
border: 0px;
width: 40px;
float: left;
}
.content{
padding: 5px;
float: left;
width: 200px;
background-color: #ffffff;
}

1 个答案:

答案 0 :(得分：0)

使用.toggle在MrSlayer的帮助下解决了它在一个div中抛出两个元素，通过CSS滚动关闭，然后使用此

$(document).ready(function(){
    $(".myhandle").toggle(function(){
        $(".slider", $(this).parents("li")).animate({right: "+=200"}, 700);
     },
    function() {
        $(".slider", $(this).parents("li")).animate({right: "-=200"}, 700);
      }
    );
});