翻转并与jQuery

标注图像我有flipIt()功能翻转图像。但我想要做的是当用户点击图像时，必须创建一个动态div（背景和一些文本），然后当图像翻转时该div必须可见。翻转并与jQuery

这拨弄不工作，请帮助。
http://jsfiddle.net/RQ62f/13/

$("img").click(function(){ 
    alert('m called'); 
    $(this).wrap('<div class="foobar"/>'); 

    $(this).css("-webkit-transform-style","preserve-3d"); 
    $(this).css("-webkit-transition","all 1.0s linear"); 
    $(this).css("transform-style","preserve-3d"); 
    $(this).css("transition","all 1.0s linear"); 

    $(this).css("-webkit-transform","rotateY(180deg)"); 
    $(this).css("transform","rotateY(180deg)"); 
});

来源

2013-05-07 anam

你有一个额外的 ''在jsfiddle中的代码中“flipIt（$（this）。）;”纠正错误http://jsfiddle.net/RQ62f/15/ – arjuncc 2013-05-07 07:48:46

从侧边栏添加jquery。 – SachinGutte 2013-05-07 07:52:40

类似[this]（http://jsfiddle.net/RQ62f/20/）？ – Vucko 2013-05-07 07:54:44

这是为我工作Demo

$("img").click(function() 
{ 
    var _this = $(this); 
    _this.wrap('<div class="foobar"/>'); 
    _this.css("-webkit-transform-style","preserve-3d"); 
    _this.css("-webkit-transition","all 1.0s linear"); 
    _this.css("transform-style","preserve-3d"); 
    _this.css("transition","all 1.0s linear"); 
    _this.css("-webkit-transform","rotateY(180deg)"); 
    _this.css("transform","rotateY(180deg)"); 
});

或者你也可以做这样的事情

function _flipIt(image , div) 
{ 
    var _this = image; 
    _this.wrap(div); 
    _this.css("-webkit-transform-style","preserve-3d"); 
    _this.css("-webkit-transition","all 1.0s linear"); 
    _this.css("transform-style","preserve-3d"); 
    _this.css("transition","all 1.0s linear"); 
    _this.css("-webkit-transform","rotateY(180deg)"); 
    _this.css("transform","rotateY(180deg)"); 
} 

$("img").click(function() 
{ 
    _flipIt($(this) , '<div class="foobar"/>'); 
    // hide image 
    $(this).css('visibility' , 'hidden'); 
});

来源

2013-05-07 07:54:32

肯定的，但图像是翻转...只有div应该是可见的 – anam 2013-05-07 08:16:16

你是什么意思只有div？使用_this.css（'visibility'，'hidden'）; – 2013-05-07 08:18:31

是的，我试过smthng ... http://jsfiddle.net/p9KqQ/3/其工作现在 – anam 2013-05-07 08:20:43

你有很多错误的存在。试试这个：http://jsfiddle.net/EhUp2/3/

我喜欢加个班，然后大量的CSS槽JS的。

标记：

<div id="container"> 
<div id="card"> 
    <div class="front face"> 
     <img src="http://placehold.it/450x280"/> 
    </div> 
</div> 
</div>

CSS：

#container { 
    position: relative; 
    margin: 10px auto; 
    width: 450px; 
    height: 280px; 
    z-index: 1; 
} 
#container { 
    perspective: 1000px; 
} 
#card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 
.flip { 
    -webkit-transform: rotateY(180deg); 
} 
.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: hidden; 
} 
.back.face { 
display: block; 
    -webkit-transform: rotateY(180deg); 
    box-sizing: border-box; 
    padding: 10px; 
    color: white; 
    text-align: center; 
    background-color: red; 
}

JS：

$('#container').click(function(){ 

    $(this).children('#card').append("<div class='back face'><p>Text.</p></div>").addClass('flip'); 

});

来源

2013-05-07 08:21:13 nick

我的问题是如何动态地在div中添加图像...此代码我已经尝试http://jsfiddle.net/YaUPs/，我不能在html中直接添加div这就是为什么我想tryng创建并动态添加到div – anam 2013-05-07 08:30:46

已更新，以便动态添加div ... – nick 2013-05-07 08:36:23

不......我只希望HTML上的img标签不应该有任何div。 – anam 2013-05-07 08:55:19

翻转并与jQuery

回答

相关问题