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

Question

我正在使用带有随机播放效果的 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>

Answer 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/

Answer 2

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

工作示例

CSS

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

JS

$(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');
    });
});