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

我正在使用jquery的flip插件。我需要在鼠标上翻转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);
    }
});});

---

有什么想法吗？

您可以尝试使用

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();
        }
    });

---

看看这是否适合您。

您可以尝试使用

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();
        }
    });

---

看看这是否适合您。

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

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

});

---

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

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

});

---

否我需要悬停时更改翻转div和鼠标悬停时更改翻转div和鼠标悬停时更改翻转div和鼠标悬停时更改翻转div和鼠标悬停时更改翻转lipelem未在第二个函数中定义。第二个函数中未定义elem。