Простой вопрос jQuery

Question

выезд http://social.allthingswebdesign.com. Если вы нажмете ссылку «Получить социальную», она выскочит, и когда вы отделите ее от мыши, она вернется туда, где она началась.

Теперь, если вы нажмете ссылку «Получить социальную», и когда она выскочит, вы нажмете «X», чтобы закрыть ее, она заходит слишком далеко, а затем выскочит.

Проверьте это, и вы поймете, что я имею в виду. Это похоже на очень простую вещь, но у меня серьезный мозговой пердит, и я не могу понять это.

Вот код JQuery:

$(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

Похоже, closeB просто нужно установить его -295 вместо -302.

$('#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. Вы должны использовать closest() вместо parent

Живой пример: http://jsfiddle.net/marcosfromero/5qGZc/

EDIT:

Первое: stopPropagation из события, чтобы предотвратить обработчик $('#social').live('click... событий будет называться:

$('#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); 
    }); 

Третье: Вместо использования 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 обработчик не заметил об этом.