シンプルなjQueryの質問

Question

チェックアウトhttp://social.allthingswebdesign.com。 「ソーシャルになる」リンクをクリックすると、そのリンクが飛び出し、マウスを動かすと、それが開始された場所に戻ります。

「Get Social」リンクをクリックすると、「Social」リンクをクリックして「X」をクリックして閉じると、遠すぎてから飛び出します。

これをチェックすると、私の言いたいことがわかります。これは非常に単純なもののようですが、私は真剣な脳のおならを持っており、それを理解することはできません。

$(document).ready(function() { 
     $('body').prepend('<div id="social"><div id="outer"><span><img src="getSocial.png" alt="Get Social" />' + 
          '<ul id="icons"><li><img class="tiny" src="fb.png" alt="Facebook" /></li><li><img class="tiny" src="twit.png" alt="Twitter" /></li></ul>' + 
          '</span></div><div id="inner"><div id="innest"><ul><li>'+ 
          '<img src="fb.png" alt="Facebook" /><a href="#">Find Us On Facebook</a>'+ 
          '</li><li>'+ 
          '<img src="twit.png" alt="Twitter" /><a href="#">Follow Us On Twitter</a>'+ 
          '</li></ul><div id="close"><a id="closeB" href="#">X</a></div></div></div></div>'); 

     $('#social').live('hover', function() { 
      var $lefty = $(this); 
      $lefty.stop().animate({ 
       marginLeft: parseInt($lefty.css('marginLeft')) == -302 ? 
       -295 : -302 
      }, 200); 
     }); 

     $('#social').live('click', function() { 
      var $lefty = $(this); 
      $lefty.stop().animate({ 
       marginLeft: parseInt($lefty.css('marginLeft')) == 0 ? 
       (40 - $lefty.outerWidth()) : 0 
      }, 200); 
     }); 

     $('#closeB').live('click', function() { 
      var $button = $(this).parent('#social'); 
      $button.stop().animate({ 
       marginLeft: parseInt($button.css('marginLeft')) == 0 ? 
       -302 : 0 
      }, 200); 
     }); 

    }); 

Answer 1

がちょうど-295代わりの-302に設定する必要がありますcloseBように思える：

はここでjQueryのコードです。

$('#closeB').live('click', function() { 
    var $button = $(this).parent('#social'); 
    $button.stop().animate({ 
     marginLeft: parseInt($button.css('marginLeft')) == 0 ? 
     -295 : 0 
    }, 200); 
}); 

上記のコードで自分の閉じるボタンをスライドボックスに適用すると、正常に動作します。

---

CSSリセットを使用して、いくつかのブラウザ間でCSSを正規化することができます。あなたが窓の端に頼っているので、私はこれが必要であると思います。

Answer 2

このラインので、私は、あなたのコードが動作しているかわからない：

var $button = $(this).parent('#social'); 

が空白$buttonを返します。あなたはparent

ライブの例の代わりにclosest()を使用する必要があります。http://jsfiddle.net/marcosfromero/5qGZc/

EDIT：

まず：呼び出される$('#social').live('click...イベントハンドラを防止するためのイベントのstopPropagation：

$('#closeB').click(function(event) { 
     var $button = $(this).closest('#social'); 
    --> event.stopPropagation(); <-- 
     $button.stop().animate({ 
      marginLeft: parseInt($button.css('marginLeft')) == 0 ? 
      -302 : 0 
     }, 200); 
    }); 

を

秒：$('#social').live('click... buで新しい位置を計算しない第三に

$('#social').click(function() { 
     var $lefty = $(this); 
     $lefty.stop().animate({ 
      marginLeft: parseInt($lefty.css('marginLeft')) == 0 ? 
     ->> -302 <--: 0 
     }, 200); 
    }); 

：tは（他のハンドラのように）固定のいずれかを使用する代わりにliveを使用しての、あなただけのbindまたはclickさえ短いを使用することができます。

第2編集： 「ソーシャル」ボックスをクローズした後は、ソーシャルボックスを閉じた後に配置されます。それを防ぐために、代わりに現在のマージンと一緒に遊んで、ちょうどevent.typeを使用します。

$('#social').live('hover', function(event) { 
     var $lefty = $(this); 
     $lefty.stop().animate({ 
     --> marginLeft: event.type == 'mouseenter' ? <-- 
      -295 : -302 
     }, 200); 
    }); 

電流マージンがclickハンドラ経由で更新することができ、元のhoverハンドラがそのことについて気づいていなかったので。