jQuery動畫不工作左屬性

我試圖使用jQuery動畫從屏幕外部飛入徽標（<img>元素）的位置。再次，它不起作用。jQuery動畫不工作左屬性

這裏是我的javascript（相關部分是在fly()方法。）

$(document).ready(function() { 
    logoFlyer.init(); 
}); 

var logoFlyer = { 
    numberOfLogos : 0, 

    init: function() { 
    logoFlyer.numberOfLogos = $('.logo').length; 
    logoFlyer.fly(1); 
    }, 

    fly: function (index) { 
    logo = "#logo_" + index; 

    $(logo).delay(300).animate({'left':'0px'}, 300, function() { 
     if (index < logoFlyer.numberOfLogos) { 
     logoFlyer.fly(index + 1); 
     } 
    }); 
    } 
}

這裏是我的CSS

.logo { 
    height: 100px; 
    display:inline-block; 
    margin-right: 30px; 
    overflow:visible; 
    border: 1px solid white; 
} 

.logo img { 
    height: 80px; 
    left: 1500px; 
    position:relative; 
}

當我設置的標識left爲0，他們是實際上我希望他們去的地方。所以問題在於jQuery動畫

如果有人可以幫助我在這裏，你可能會救我完全拋棄jQuery並切換到angular.js。

來源

2014-06-10 Marco Prins

您會考慮使用CSS3只爲動畫？我可以幫你，但不會有任何jquery.animate – josec89

當然，如果你可以使圖像在一個接一個地飛行 –

你會發布你的相對標記嗎？ – Jai

所以這個代碼：

$(logo).delay(300).animate({'left':'0px'}, 300, function() { 
    if (index < logoFlyer.numberOfLogos) { 
    logoFlyer.fly(index + 1); 
    } 
});

這裏的有趣的部分是$(logo)我以爲對待像$('#logo_1') or $('#logo_2') etc.。所以現在只有position relative/absolute元素才能夠動畫。

所以你可以檢查這個元素是否具有相對/絕對位置。

來源

2014-06-10 18:32:15 Jai

確實是這個問題。謝謝！ –

不客氣@MarcoPrins很高興這是一個幫助。 – Jai

不過已經有了解決方案，但這個方案沒有的jQuery（僅CSS3！）

HTML

<ul> 
    <li class='logo'> 
     --- Image 1 --- 
    </li> 
    <li class='logo'> 
     --- Image 1 --- 
    </li> 
    <li class='logo'> 
     --- Image 1 --- 
    </li> 
    <li class='logo'> 
     --- Image 1 ---   
    </li>

CSS

.logo { 
list-style: none; 
text-align: center; 

/** To the left by default **/ 
-webkit-transform: translate(-100%); 
-moz-transform: translate(-100%); 
-o-transform: translate(-100%); 
-ms-transform: translate(-100%); 
transform: translate(-100%); 

/** Translate Animation --> 0.3s ease effect **/ 
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
-ms-transition: all 0.3s ease; 
transition: all 0.3s ease; 
} 

.logo.show { 
-webkit-transform: translate(0%); 
-moz-transform: translate(0%); 
-o-transform: translate(0%); 
-ms-transform: translate(0%); 
transform: translate(0%); 
}

個JS

var logoFlyer = { 
numberOfLogos : 0, 

init: function() { 
    logoFlyer.numberOfLogos = $('.logo').length; 
    setTimeout(function() { 
     logoFlyer.fly(0); 
    }, 300); 
}, 

fly: function (index) { 
    // No need to add indexes 
    logo = $(".logo")[index]; 

    $(logo).addClass("show"); 
    setTimeout(function() { 
     logoFlyer.fly(index + 1); 
    }, 300); 
    } 
} 

$(function() { 
    logoFlyer.init(); 
});

Live Demo

來源

2014-06-10 18:49:31 josec89

jQuery動畫不工作左屬性

回答

相關問題