更改事件时图像交换的 jQuery/javascript“旋转”效果答案

【问题标题】：jQuery/javascript "rotate" effect for image swap upon change event更改事件时图像交换的 jQuery/javascript“旋转”效果
【发布时间】：2012-11-21 06:25:14
【问题描述】：

我正在寻找类似于 WOW Slider 中的旋转效果的图像过渡：http://wowslider.com/javascript-slideshow-quiet-rotate-demo.html

主要区别是我希望在下拉列表的更改事件时发生转换。这是功能代码：

http://jsfiddle.net/zCknb/14/

js 很简单：

$("#assignee").change(function () {
   $("#pic").attr("src", $("#assignee").val());
})

如果我更改受让人，我希望新照片像 WOW 滑块中的旋转效果一样旋转。

如果可以的话，我不想解构整个滑块库。有人知道获得这种效果的更简单方法吗？

编辑：到目前为止，我感谢大家的投入，但我正在寻找一种与 WOW Slider 中的旋转等效的效果。简单的幻灯片不会削减它。

【问题讨论】：

你做到了吗？我需要相同的功能

标签： javascript jquery html image jquery-effects

【解决方案1】：

硬币滑块 jquery 插件具有漩涡效果。检查它是否有用 http://www.htmldrive.net/items/show/245/Coin-Slider-Image-Slider-with-Unique-EffectsjQuery 并且您可以在 jquery 的更改事件处理程序中使用

【讨论】：

你将如何改变它的行为以在 dropdpwn 更改事件上交换图像？另外，这种效果实际上并没有旋转。

【解决方案2】：

这是一个例子。见：http://jsfiddle.net/zCknb/12/

效果：

/*
* effects
* animate-left_goright           
* animate-right_goleft           
* animate-top_gobottom
* animate-bottom_gotop
*/

选项属性 animate="animate-left_goright"

在动画左++之后创建左；

选项属性 animate="animate-right_goleft"

在左动画 ++ 之后创建右；

选项属性 animate="animate-top_gobottom"

在底部动画++之后创建-top；

选项属性 animate="animate-bottom_gotop"

在顶部动画 ++ 之后创建 -bottom；

查看并理解此示例。

拍摄很容易；

【讨论】：

嗨 Yasar，这与 WOW Slider 中的旋转效果不同。我的最终用户需要类似的过渡。