的jQuery DIV翻转

这是HTML的jQuery DIV翻转

<article class="post"> 
    <div class="post-inner"> 
     <div class="post-content"> 
      // stuff here 
      <button class="order">Order</button> 
     </div> 
     <div class="post-content-back"> 
      // stuff here 
      <button class="back">Back</button> 
     </div><!--/.post-back --> 
    </div> 
</article>

我使用这个flippy plugin翻转正面和背面的意见，但它只是不适合某些原因，我不工作：

jQuery(".post .order").bind("click",function(e){ 
    e.preventDefault(); 
    jQuery(this).parents(".post-content").flippy({ 
     content:jQuery(this).next().find(".post-content-back"), 
     direction:"LEFT", 
     duration:"750", 
     onStart:function(){ 
      alert("Let's flip"); 
     }, 
     onFinish:function(){ 
      alert("ok, it's flipped :)"); 
     } 
    }); 
});

来源

2012-09-07 3zzy

在控制台中是否有任何错误（在大多数浏览器中按f12） – amd

@Ahmad没有任何错误。 – 3zzy

我收到了一个JavaScript错误'未捕获的ReferenceError：g没有定义'使用此代码 - 请参阅我的答案，这解释了为什么 – andyb

您需要提供一个background-color到.post-content元素。

该插件执行此在线路＃217

_Color = convertColor($this.css("background-color"));

并且其敛background-color属性，其中，如果提供的是默认为rgba(0, 0, 0, 0)不（以及它为我在Chrome）

当翻转线＃312使用像这样的颜色串：

ctx.fillStyle = (_Ang > 90) ? changeColor(_Color_target,Math.floor(Math.sin(rad)*_Light)) : changeColor(_Color,-Math.floor(Math.sin(rad)*_Light));

和c第＃441行的changeColor(colorHex,step)函数全部为该颜色的十六进制值。不提供一个十六进制字符串导致脚本时，它试图为红，绿，蓝从rgba(0, 0, 0, 0)与错误Uncaught ReferenceError: g is not defined

功能尝试使用gb红，a(绿色和0,蓝色提取十六进制值爆炸。

增加了demo但它是一个相当本地化的问题，所以我不认为在这个答案中内联所有代码是有好处的。

@ tommarshall的答案也非常相关，因为您确实有一个选择器问题找到.post-content-back元素。

来源

2012-09-07 12:51:54 andyb

AAAAH！就是这样，我自己从来没有解决它，上面的人给了我一个负面的代表这个问题：S – 3zzy

-2是不是很担心:-)我认为，如果一个用户被删除任何代表从任何人得到他们也一样！此外，你从我那里得到+1，所以你现在+3 – andyb

这里的问题就是你提取内容的方式。

jQuery(this).next().find(".post-content-back"),

这将返回的下一个元素（这是.POST内容回），然后查找与类里面。员额内容背的元素。然后你返回jQuery对象本身而不是内容。

这里是你真正想要的东西：

jQuery(this).next(".post-content-back").html();

但是它也能更好的初始化插件flippy并将其存储在一个变量前的内容抓取。

这里有一个工作的例子 - http://jsfiddle.net/SqD6x/

来源

2012-09-07 10:59:20 tommarshall

谢谢，但它仍然警告“让我们翻转”，隐藏.post-content并显示一个空的可能10px高度框。 – 3zzy

它是警报让我们翻转，因为这是onStart回调中定义的内容？如果你不想要警报，然后删除回调 - http://jsfiddle.net/SqD6x/1/ – tommarshall

不知道你的意思是隐藏.post内容或10px高度框。 – tommarshall

的jQuery DIV翻转

回答

相关问题