简单的jQuery问题

检出http://social.allthingswebdesign.com。如果您点击“获取社交”链接，它会弹出，当您将鼠标移开时，它会返回到开始位置。简单的jQuery问题

现在，如果您单击“获取社交”链接，并在弹出时单击“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); 
     }); 

    });

来源

2011-06-21 Catfish

仅供参考，它似乎只发生在Chrome浏览器中（适用于Firefox） –

它不适用于FF。 – Catfish

好像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进行规范化。既然你依靠窗口的边缘，我猜这是必要的。

来源

2011-06-21 02:46:48 user113716

不起作用。仍然回到过去，然后恢复正常。 – Catfish

@Catfish：对我来说非常合适，但之后我不得不防止事件冒泡，因为看起来在盒子上的任何位置点击都会关闭它。盒子上还有其他的点击事件吗？ – user113716

是的，我确实是这样做的，但如果你点击框中的任何地方，它会很好地关闭，如果你真的点击了X，它会关闭得太远。 – Catfish

我不知道你的代码是如何工作的，因为这条线：

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

返回空白$button。您应该使用closest()代替parent

活生生的例子：http://jsfiddle.net/marcosfromero/5qGZc/

编辑：

第一：事件，防止$('#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上的新位置T选用（在其他处理程序等）固定一个：

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

三：不要使用live的你可以只使用bind，甚至更短的click。

第二次编辑： 关闭“社交”框后，它的位置就好像它在哪里盘旋。为了防止这种情况，而不是目前的保证金打，只是用event.type：

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

因为目前的利润率可以通过click处理程序进行更新，并在原hover处理程序没有有关通知。

来源

2011-06-21 02:51:54 marcosfromero

当您单击X时，您的jsfiddle仍然将绿色选项卡推得太远。 – Catfish

简单的jQuery问题

回答

相关问题