jQuery翻转！点击divs里面的事件

我正在试图制作一个闪存卡学习项目的网络应用程序，我想用Flip!我有一个问题，但是当我把它们的click事件绑定到div内的flip函数被翻转。我是jQuery的新手。任何帮助，将不胜感激。是否有翻转论坛？我的代码如下。jQuery翻转！点击divs里面的事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Flippant</title> 
    <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[  
    google.load("jquery", "1.3.2"); 
    google.load("jqueryui", "1.7.2"); 
    //]]> 
    </script> 
    <script type="text/javascript" src="jquery.flip.js"></script> 
    <script type="text/javascript"> 
    var f2b = function(){ 
    $("#card").flip({ 
     direction: 'tb', 
     color: '#B34212', 
     content: $('#back') 
    }); 
    } 

    var b2f = function(){ 
    $("#card").flip({ 
     direction: 'tb', 
     color: '#B34212', 
     content: $('#front') 
    }); 
    } 
    $(document).ready(function(){ 
    $("#flip1").click(f2b); 
    $("#flip2").click(b2f); 
    $("#flip2").click(); 
    }); 
    </script> 
    <style type="text/css"> 
    .back { display: none; } 
    .front { display: none; } 
    </style> 
</head> 
<body> 
    <div class="card" id="card"></div> 
    <div class="front" id="front"> 
    This is <br /> 
    the front <br /> 
    of the card. <br /> 
    <a href="#" id="flip1" title="flip to back">Flip1</a> 
    </div> 
    <div class="back" id="back"> 
    This is<br /> 
    the back<br /> 
    of the card.<br /> 
    <a href="#" id="flip2" title="flip to front">Flip2</a> 
    </div> 
</body> 
</html>

来源

2009-09-26 kzh

为什么你有2个点击功能分配给＃flip2？ – yoda 2009-09-26 23:24:53

第二个调用第一个设置的点击功能。第二个不分配任何东西。 – kzh 2009-09-27 01:32:01

对不起，我不明白你的问题。现在正在做什么，它应该做什么？你刚才说“我有问题。” – 2009-09-27 02:00:55

它似乎翻转插件破坏您在文档准备就绪设置的事件处理程序。解决方法是使用live event binding。更改文档准备功能，这一点：

$("#flip1").live('click', f2b); 
$("#flip2").live('click', b2f); 
$("#flip2").trigger('click');

编辑：我还要提到的是，最初的动画似乎不火，除非你已经在你的CSS指定的宽度，这样的：

.card { height: 200px; width:200px; }

来源

2009-09-27 03:06:05

jQuery翻转！点击divs里面的事件

回答

相关问题