0

我有 5 个 div 可以滑入我准备好的文档页面。我还有一个效果，显示在相同 div 上悬停时隐藏的背景。当我实现幻灯片效果时，隐藏效果现在不起作用。我如何拥有幻灯片效果和隐藏效果。幻灯片效果可见http://psyllex.com隐藏效果可见http://psyllex.com/index_copy.php。这是jquery代码：

<script>

$(document).ready(function() {

    $( ".header" ).effect( "slide", {direction: "left"}, 1500 );
    $( "#block1").effect("slide", {direction: "right"}, 1750);
    $( "#block2").effect("slide", {direction: "right"}, 2000);
    $( "#block3").effect("slide", {direction: "right"}, 2250);
    $( "#block4").effect("slide", {direction: "right"}, 2500);



    //Custom settings
    var style_in = 'easeOutBounce';
    var style_out = 'jswing';
    var speed_in = 1000;
    var speed_out = 300;    

    //Calculation for corners
    var neg = Math.round($('.qitem').width() / 2) * (-1);   
    var pos = neg * (-1);   
    var out = pos * 2;

    $('.qitem').each(function () {

        url = $(this).find('a').attr('href');
        img = $(this).find('img').attr('src');
        alt = $(this).find('img').attr('img');

        $('img', this).remove();
        $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
        $(this).children('div').css('background-image','url('+ img + ')');

        $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});   
        $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});    
        $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos}); 
        $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});  

    }).hover(function () {

        $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out}); 
        $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});    
        $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});   
        $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});  

    },

    function () {

        $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});   
        $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});    
        $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in}); 
        $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});  

    }).click (function () {
        window.location = $(this).find('a').attr('href');   
    });



});

</script>

我试过 div.clearQueue(); 但这没有用。所以我很茫然。请帮帮我。

4

2 回答 2

0

悬停效果引发错误

Uncaught TypeError: Object #<Object> has no method 'jswing' jquery-1.9.1.js:9032
Tween.run jquery-1.9.1.js:9032
Animation.tick jquery-1.9.1.js:8728
jQuery.fx.timer jquery-1.9.1.js:9329
Animation jquery-1.9.1.js:8795
doAnimation jquery-1.9.1.js:9121
jQuery.extend.dequeue jquery-1.9.1.js:1936
(anonymous function) jquery-1.9.1.js:1979
jQuery.extend.each jquery-1.9.1.js:648
jQuery.fn.jQuery.each jquery-1.9.1.js:270
jQuery.fn.extend.queue jquery-1.9.1.js:1972
jQuery.fn.extend.animate jquery-1.9.1.js:9134
(anonymous function) psyllex.com/:49
jQuery.event.special.(anonymous function).handle jquery-1.9.1.js:3431
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle

检查您的代码后，问题是两次包含 jQuery

<script src="jquery-1.3.1.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
**<script src="js/jquery-1.9.1.min.js"></script>**

第二个覆盖第一个！

于 2013-09-02T23:14:47.527 回答
0

所以经过多次修补：这是一个简单的修复。显然，在 jquery.easing 中，'jswing' 已被弃用。所以我只是将其更改为线性。 

//Custom settings
    var style_in = 'easeOutBounce';
    **var style_out = 'linear';**
    var speed_in = 1000;
    var speed_out = 300;

现在效果很好！谢谢您的帮助

于 2013-09-03T15:21:33.057 回答