在悬停时放大图像然后启动 jquery 循环答案

【问题标题】：Enlarge image on hover then start jquery cycle在悬停时放大图像然后启动 jquery 循环
【发布时间】：2014-07-03 00:58:26
【问题描述】：

我正在使用带有随机播放效果的 jQuery Cycle 插件。我希望能够在悬停时放大图像然后以较大的图像开始幻灯片放映。我尝试了几种不同的 CSS 样式，但还没有运气。看来我可以把它放大，也可以让它随机播放，但不能两者兼而有之。

这是我目前得到的：

jsFiddle

<script type="text/javascript">
$(document).ready(function(){ 
    $('#s6').cycle({
        fx: 'shuffle',
        shuffle: {
            top:  -50,
            left:  145
        },
        easing: 'easeOutBack',
        delay: -1000,
        speed: 700,
        timeout: 3000,
    }).cycle("pause").hover(function() {
        $(this).cycle('resume');
    },function(){
        $(this).cycle('pause');
    });
});
</script>
<div id="s6">
    <img border="0" src="http://s3.amazonaws.com/dfc_attachments/images/3216165 /pool_house_fireplace_web.JPG" alt="Poolhouse Fireplace" width="150" height="100"/> 
    <img border="0" src="http://s3.amazonaws.com/dfc_attachments/images/3216093/pool_house_kitchen_web.JPG" alt="Poolhouse Kitchen" width="150" height="100"/> 
</div>

【问题讨论】：

你的意思是第一次悬停会使整个幻灯片变大，然后开始播放？
是的。有什么想法吗？
你应该给插件链接，所以我可以在 Fiddle 中测试

标签： jquery hover slideshow jquery-cycle

【解决方案1】：

你可以试试这样的：

$('#s6').one('mousenter', function() {
    $(this).animate({ width: xxxx, height: yyy }, function() { 
        /* resize complete, call cycle*/

        $(this).cycle({
            fx: 'shuffle',
            shuffle: {
                top: -50,
                left: 145
            },
            easing: 'easeOutBack',
            delay: -1000,
            speed: 700,
            timeout: 3000,
        }).hover(function() {
            $(this).cycle('resume');
        }, function() {
            $(this).cycle('pause');
        });
    });
});

one() 方法只会触发一次

API 参考http://api.jquery.com/one/

【讨论】：

应该是其他方式......你创建小提琴需要基础 css
这是迄今为止我能得到的最接近的，它看起来仍然很粗糙。 jsfiddle.net/apaul34208/pKNcr
问题与“随机播放”和悬停有关。很难让两者一起工作。当 shuffle 激活时，mouseleve 发生。可能必须在透明的幻灯片放映之上创建另一个 div。用它来处理鼠标事件

【解决方案2】：

我使用了一个容器 div 并将其设置为在悬停时放大，并将幻灯片设置为仅在悬停时播放。

Working Example

CSS

.ImageContainer:hover{
       transition:all .3s;
       transform:scale(2);
  }

$(document).ready(function () {
    $('#s6').cycle({
        fx: 'shuffle',
        shuffle: {
            top: -50,
            left: 395
        },
        easing: 'easeOutBack',
        delay: -1000,
        speed: 700,
        timeout: 1000,
        next: '#forward',
        prev: '#rewind',
        pause: 0
    }).cycle('pause').hover(function () {
        $(this).cycle('resume');
    }, function () {
        $(this).cycle('pause');
    });
});

【讨论】：