jQuery puff效果在效果被应用后返回Div?

时间:2013-10-03 14:00:31

标签: javascript jquery html

我正在使用jQuery puff effect,我需要知道如果它已经被吹走,我可以将Div返回到页面上!

目前代码会使Div消失(基本上它会让它完全消失)。

怎样才能让它完全没有吹掉Div?

我怎么能以某种方式制作它以便它在它膨胀之后重新出现?

这是我目前使用的简单代码:

<script>
  $( '#myButton' ).click(function() {
     $( "#myDiv" ).effect( "puff", "slow" );
  });
</script>

3 个答案:

答案 0 :(得分:0)

抽吸效果只是隐藏你的元素,它设置style="display: none;", 所以你只需要显示它,你可以使用像

这样的东西
$( "#myDiv" ).show( "slow" );

DEMO

答案 1 :(得分:0)

只需再次切换它或按照DOCS

中的说明使用切换
$( "#myDiv" ).toggle( "puff" );

如果您想将不透明度更改为50%而不是将所有不透明度更改为不透明:

// 50% opacity
$("#myDiv").animate({'opacity': 0.5});
//return to normal
$("#myDiv").animate({'opacity': 1});

修改

您需要类似DEMO

的内容

如果你有兴趣,粉扑的代码是:

$.effects.effect.puff = function( o, done ) {
    var elem = $( this ),
        mode = $.effects.setMode( elem, o.mode || "hide" ),
        hide = mode === "hide",
        percent = parseInt( o.percent, 10 ) || 150,
        factor = percent / 100,
        original = {
            height: elem.height(),
            width: elem.width(),
            outerHeight: elem.outerHeight(),
            outerWidth: elem.outerWidth()
        };

    $.extend( o, {
        effect: "scale",
        queue: false,
        fade: true,
        mode: mode,
        complete: done,
        percent: hide ? percent : 100,
        from: hide ?
            original :
            {
                height: original.height * factor,
                width: original.width * factor,
                outerHeight: original.outerHeight * factor,
                outerWidth: original.outerWidth * factor
            }
    });

    elem.effect( o );
};

您可以将其更改为不隐藏元素,但我现在无法快速执行此操作。

答案 2 :(得分:0)

使用toggle

$('#tgBtn').toggle(function () {
    $('#toggledDiv').animate({'opacity': 1}, function(){ 
        $('#toggledDiv').hide('puff', 750); 
    });
}, function () {
    $('#toggledDiv').show('puff', 750, function(){ 
        $('#toggledDiv').animate({'opacity': 0.4}); 
    });
});

http://jsfiddle.net/q7FcA/5/