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 が 2 回含まれていました。

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

2番目のものは最初のものを上書きしています!

于 2013-09-02T23:14:47.527 に答える