1

我正在使用jQuery puff effect，我需要知道如何在 Div 被吹走后将其返回到页面上！

目前，该代码将使 Div 消失（基本上它使它完全消失）。

我怎样才能不把 Div 完全吹走？

我怎样才能让它在它膨胀后重新出现在 Div 中？

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

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

3 回答 3

0

粉扑效果只是隐藏了你的元素，它设置了style="display: none;"，所以你只需要将它显示回来，你可以使用类似的东西

$( "#myDiv" ).show( "slow" );

演示

于 2013-10-03T14:03:53.230 回答
0

只需再次切换或使用DOCS中所述的切换：

$( "#myDiv" ).toggle( "puff" );

如果要将不透明度更改为 50%，而不是全部返回不透明：

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

编辑：

你需要类似的东西DEMO

有兴趣的话，puff的代码是：

$.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 );
};

您可以将其更改为不隐藏元素，但我现在不能那么快。

于 2013-10-03T14:04:30.967 回答
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/

于 2013-10-03T14:05:50.660 回答