Question

我正在使用jquery的翻转插件。我需要在鼠标上翻转鼠标时翻转div还原翻转div。我想翻转一张卡片（div），在完成翻转后，立即将其翻转。这就是我尝试过的：

$(document).ready(function(){

$('.sponsorFlip').bind("click",function(){

    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

    var elem = $(this);

    // data('flipped') is a flag we set when we flip the element:

    if(elem.data('flipped'))
    {
        // If the element has already been flipped, use the revertFlip method
        // defined by the plug-in to revert to the default state automatically:

        elem.revertFlip();

        // Unsetting the flag:
        elem.data('flipped',false)
    }
    else
    {
        // Using the flip method defined by the plugin:

        elem.flip({
            direction:'lr',
            speed: 350,
            onBefore: function(){
                // Insert the contents of the .sponsorData div (hidden
                // from view with display:none) into the clicked
                // .sponsorFlip div before the flipping animation starts:

                elem.html(elem.siblings('.sponsorData').html());
            }
        });

        // Setting the flag:
        elem.data('flipped',true);
    }
});});

有什么想法吗？

Answer 1

您可以尝试使用onEnd回调。

像这样：

elem.flip({
        direction:'lr',
        speed: 350,
        onBefore: function(){
            // Insert the contents of the .sponsorData div (hidden
            // from view with display:none) into the clicked
            // .sponsorFlip div before the flipping animation starts:

            elem.html(elem.siblings('.sponsorData').html());
        },
        onEnd: function() {
            elem.revertFlip();
        }
    });

看看它是否适合你。

Answer 2

你可以这样做，我修改了下面的代码来使用悬停：

    $(document).ready(function(){

    $('.sponsorFlip').hover(function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);



            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden
                    // from view with display:none) into the clicked
                    // .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }

            });





    }, function() {$(this).revertFlip();});

});

使用jQuery翻转插件在鼠标悬停时翻转div

2 个答案: