Эффекты jQuery не работают после того, как я внедрил эффект слайда на тот же элемент

Question

У меня есть 5 дел, которые я вставляю на свою страницу готового документа. У меня также есть эффект, который показывает фон, который скрыт при наведении на тех же элементах 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(); но это не сработало. Так что я в растерянности. Пожалуйста, помогите мне.

Answer 1

Так что после долгих переделок: это простое исправление. Очевидно, в jquery.easing "jswing" устарела. Поэтому я просто изменил его на линейный.

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

Теперь это прекрасно работает! Спасибо за помощь

Answer 2

Эффект повышения при наведении

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>**

Второй перезаписывает первый!