jQuery 泡芙效果，用于在应用效果后返回 Div

jQuery puff effect to return back the Div after the effect has been applied?

本文关键字：返回 Div 应用 用于 泡芙 jQuery      更新时间：2023-09-26

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

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

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

我怎样才能以某种方式制作它，以便在它膨胀后重新出现 Div？

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

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

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

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

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

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

编辑：

你需要类似的东西

演示

如果你有兴趣，泡芙的代码是：

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

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

泡

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

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

演示

使用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/

相关文章：