0

私はCSSとjQueryの組み合わせを使用して、ブラウザーの右側にタブのセットを作成しています。これは、1つの欠陥がある場合とほぼ同じように機能します。ユーザーがクリックしてタブの残りの部分をスライドさせて表示するために右側に表示される画像は、実際のコンテンツが適切にスライドする間、スライドする代わりに、あるべき場所に「ポップ」するだけです。

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;
}
4

1 に答える 1

0

MrSlayer の助けを借りて.toggle、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);
      }
    );
});
于 2012-05-17T12:12:45.027 に答える