0

jquery トグル機能で問題が発生しています。

ベロー私はデモ用のリンクを添付しています...

jsfiddle リンク

jqueryコード - 

$(document).ready(function(){
    $('.collapsBTN').toggle(
        function () {
                $(".rhs_container").css({'display':'none'});
                $('.rhs').animate({width: "20"});
            },
        function () {
                $(".rhs_container").css({'display':'block'});
                $('.rhs').animate({width: "295"});
            }
    );
});

問題- 折りたたみボタン (上記のリンクに示すようにピンク色) をクリックすると、トグル機能は正常に動作しますが、幅のアニメーション中にボタンが消えます。アニメーションで表示されるはずです。

誰でもこれを解決できますか？

4

2 に答える 2

0

html 5 と css3 を使用している場合は、次の方法が適しています。

<script>
    $('.collapsBTN').click(function () { 

       $('.rhs_container).toggleClass('change-size');
   });

</script>

<style>
  .rhs{
       -webkit-transition: width 1.5s linear ;
       -moz-transition: width 1.5s linear ;
       transition: width 1.5s linear ;
   }

   .change-size {
       width: 20px;

   } 

  .change-size  .rhs_container{
       display:none;
   }

それ以外の場合は、jquery jsfiddle リンクで簡単な解決策を確認してください

于 2013-06-03T09:27:40.570 に答える
0

問題は、jQuery が幅を超えてアニメーション化する一方で、overflow:hiddenスタイルを作成することです。ただし、これは機能します： jsfiddle

于 2013-06-03T09:57:29.500 に答える