私の問題と切り替えサイドバーを利用jQuery

Question

私が作り出してしまおうというも簡単に切り替えサイドバーを利用jqueryで拡大および契約の場合ボタンを押していただきます。ボタンにも変化が他のタイプのボタンが押していただきます。サイドバーの拡大により、が何らかの理由で動けない、ワークショップをおこなう独自の位置にします。きのコピーをjavascriptとhtmlで http://www.jqueryhelp.com/viewtopic.php?p=4241#4241

こちらのコードは、Bendeway!D

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 100}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
});

Answer 1

負の数を左から右に使用するのではなく、してみてください。加えて、私が代わりにfalseを返すのでpreventDefaultを使用することをお勧めします。

$(".active").click(function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide");
}); 

更新

私は気づいたもう一つの作品は、文書の準備ができているとき、あなたは.activeボタンにクリックイベントを取り付けることですが、ドキュメントは、あなたがそれを変更した後にそれがでてくる準備ができて何.activeボタンがありません。ここではカップルのオプションがあります。

まず

jQueryの1.3の新しいライブの機能を使用することです

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

他のオプションは、（例えばIDに、多分）別の修飾にクリックイベントを設定していることであろう。

<span>News  <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>     

クリックを処理するためにこれを使用

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  $(this).is('.btn-slide').each(function() {
   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
  });

  $(this).is('.active').each(function() {
   $("#sidebar").animate({opacity: "hide", left: -250}, "slow"); 
  });
  $(this).toggleClass("active").toggleClass('btn-slide');  
}); 

、さらにはより簡潔な

$("#sliderButton").click(function(e){ 
  e.preventDefault();

  var animationSettings = {opacity: "show", left: 250};
  if ($(this).hasClass('active') )
  {
    animationSettings = {opacity: "hide", left: -250};
  } 

  $("#sidebar").animate(animationSettings , "slow"); 
  $(this).toggleClass("active").toggleClass('btn-slide');  
}); 

私は考えることができる最後のオプションは、あなたがそれらを変更した後にクリックイベントを設定することですが、私はそう、私はサンプルを供給するつもりはないことをしないだろう。

最後に、私はあなたのアクティブコールバックへの警告に入れて、あなたのアクティブなボタンイベントが実際に発射されていることを確認します。

Answer 2

あなたのロジックが書かれている方法は、私はあなたが1を追加し、他を削除しますあなたのクリックハンドラ内の両方のクラスの「toggleClass」を実行する必要があると思います。たとえば、あなたの「アクティブ」の項目をクリックしたときに、あなたがトグルBTN-スライドクラスを（追加）が、これは場所で「アクティブ」クラスをあまりにも残します。

もちろん代わりに「toggleClass」を使用してのあなたも、より明確にするために、「addClass」と「removeClass」を使用することができます。

私はあなたのDOM内で何が起きているかを見るためにFirebugのようなツールを使用することをお勧めします。

$(document).ready(function(){

   $(".btn-slide").click(function(){
   $("#sidebar").animate({opacity: "show", left: "250"}, "slow");
   $(this).toggleClass("active");  // add class
   $(this).toggleClass("btn-slide"); // remove class
   return false;
   });   

});

$(document).ready(function(){

   $(".active").click(function(){
   $("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
   $(this).toggleClass("active");  // remove class
   $(this).toggleClass("btn-slide");  // add class
   return false;
   });
}); 

Answer 3

この作品ます。

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#sidebar").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});

Answer 4

HTMLの

<div id="content">
 <a href="#" id="ec">Expand / Contract</a>
 <div id="main">
   Watch Me Shrink Or Grow
 </div>
</div>

のJquery

$(function() {
 var ecswitch = 1;
 /* prevent the annoying scroll back up thing */
 $("#ec").click(function(e) {
   e.preventDefault();
   var x = $("#main").width(); // get element width
   var y = $("#main").height(); // get element height 
   if(ecswitch == 1) {
    $("#main").animate({opacity:0, hieght:"0", width:"0"}, 1300);
    ecswitch = 0;
   } else {
     $("#main").animate({opacity:1, hieght:y, width:x}, 1300);
    ecswitch = 1;
   }
 });
});

CSS

#main { height:200px; }

説明

OKを選んだのはこのために少しでとは異なります。この初期化された実験れ200px×やの幅が自動で行えます。をクリックすると、ハイパーリンクの実験ではあるが、1.3秒およびスイッチを0に設定されます。をクリックすると再度も上期の1.3秒のスイッチがセット後1になります。光のようにスイッチです。を使用したアニメーションはここで単純なフェード→っと飽き...

はたいへんお世話になりました。たの幅や高さが要素の前にゼロ-グした場合と幅：100%"とhieght:"100%"私のアニメーションで設定し100%のページの幅と高さ---しない。

注意：私はまた、不透明度上期間エクスペディアのための色などの