jQuery DIV 翻转

Question

这是 HTML

<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翻转正面和背面 View ，但由于某种我无法理解的原因它不起作用:

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 :)");
        }
    });
});

Answer 1

您需要为 .post-content 元素提供 background-color。

该插件在第 #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));

并在第 #441 行调用 changeColor(colorHex,step) 函数，该函数需要颜色的十六进制值。不提供十六进制字符串会导致脚本在尝试从 rgba(0, 0, 0, 0) 中提取红色、绿色、蓝色的十六进制值时发生爆炸，并出现错误 Uncaught ReferenceError: g 未定义

该函数尝试使用 gb 作为红色，a( 作为绿色，0, 作为蓝色。

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

@tommarshall 的答案也非常相关，因为您在查找 .post-content-back 元素时确实遇到了选择器问题。