Question

我希望获得与网站http://www.wpnukes.com/demo/html/welcare/

相同的效果

请注意登录链接旁边的屏幕右上角的联系人链接，当您点击联系一个带有混蛋的div下拉菜单时，如何实现此效果或者请告诉我这个效果的名称所以我可以google它，并可以找到一个代码。拜托，谢谢。

Answer 1

您必须使用jQuery UI来实现此类效果。他们所做的只是一个具有绝对位置的div，可以联系按钮和显示：none;联系人按钮上的查询会触发效果。 请记住，您应该将jquery Core plus UI文件添加到您的HTML中。

SOLUTION 1 - BOUNCE EFFECT - LIVE DEMO

$(document).ready(function(){
    $("button" ).click(function() {
         $( ".toggle" ).toggle( "bounce", { times: 3 }, "slow" );
    });
});

SOLUTION 2 - EASEOUTBOUNCE EFFECT - LIVE DEMO

$(document).ready(function(){
   $("button").click(function () {
      $('.login').toggle('slide', {
         duration: 1000,
         easing: 'easeOutBounce',
         direction: 'up'
      });
   });
});

Answer 2

看看jQueryUI，有一些动画反弹效果

Answer 3

这是一个自定义的jquery动画：

$("#link").click(function(e) {          
        e.preventDefault();
        $('#divToAnimate').animate({height: 'show', opacity: '0', filter: 'alpha(opacity=0)'}, {duration: 0}).animate({opacity: '.5', filter: 'alpha(opacity=50)', top: 58}, {duration: 300, easing: 'easeInBack'}).animate({opacity: '1', filter: 'alpha(opacity=100)', top: 24}, {duration: 200, easing: 'easeOutBack'});
    });

jQuery div下拉一个click事件

3 个答案: