2

I was looking to achieve the same effect as on the website http://www.wpnukes.com/demo/html/welcare/

Please notice the contact link on the top right of the screen next to sign in link, when you click on Contact a div drop down with jerks, How can I achieve this effect or some one please tell me the name of this effect so i can google it and can find a code. please, Thanks.

4

3 回答 3

7

对于这种类型的效果，您必须使用 jQuery UI。他们所做的只是一个具有绝对位置的 div 到联系按钮和显示：无；联系按钮上的查询触发效果。请记住，您应该将 jquery Core plus UI 文件添加到您的 html 中。

解决方案 1 - 弹跳效果 - 现场演示

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

解决方案 2 - EASEOUTBOUNCE 效果 - 现场演示

$(document).ready(function(){
   $("button").click(function () {
      $('.login').toggle('slide', {
         duration: 1000,
         easing: 'easeOutBounce',
         direction: 'up'
      });
   });
});
于 2013-08-11T14:15:56.847 回答
0

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

于 2013-08-11T14:15:45.800 回答
0

那是一个自定义的 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'});
    });
于 2013-08-11T14:25:00.637 回答