Это может быть слишком обнадеживающий вопрос, но я только начал изучать JQuery (также JS начинающий) - поэтому я не знаю, что я не знаю.(Поэтому все конструктивные советы приветствуются!)
Я создал свою первую анимацию jquery - представление (безопасно) по адресу https://ss.smile -nz.com / ~ qenew1 / test2.php .Я последовательно отображаю 3 изображения, представляющие линейки продуктов, сжимаю и перемещаю их в строку вниз по странице.
Я действительно хочу, чтобы состояние после анимации (3 сокращенных изображения в строке и т. Д.) Было по умолчанию,так что, если пользователь переходит на другую страницу веб-сайта, а затем возвращается на эту страницу, анимация не запускается повторно.
Без использования файлов cookie.
Я думал о создании этогоконечное состояние как начальное состояние, но скрытое, а затем запуск анимации для достижения этого состояния ... но это кажется большой работой, так есть ли лучший способ?
HTML
<div id="outer-box">
<div class="myContent">
<div id="hdr">#HMAINS#</div>
<script> /*** remove 'logo' text from menu **/
document.getElementById('hdr').getElementsByTagName('td')[4].innerHTML = "";
</script>
<div class="box">#CONTENT#</div>
</div>
<div class="showImg image1">
<h4>Aquaculture</h4>
<img id="startNow" src="images/oceanforest3.jpg">
</div>
<div class="showImg image2">
<h4>Fishing</h4>
<img src="images/Pearl-in-shell_square3.jpg">
</div>
<div class="showImg image3">
<h4>Industrial</h4>
<img src="images/temp.jpg">
</div>
</div>
JQuery
$("#startNow").load(function () {
$(".image1 img").delay(500).animate({opacity: op},{duration: d});
$(".image1").delay(500).animate( {left: '100px', top: t, height: h, width: w},
{duration: d, complete: function () {
$(".image1 h4").css({ "visibility": "visible"});
$(".image2 img").animate({ opacity: op }, { duration: d });
$(".image2").animate( {left: '450px', top: t, height: h, width: w},
{duration: d, complete: function () {
$(".image1 h4").css({ "color": "#000000" });
$(".image2 h4").css({ "visibility": "visible" });
$(".image3 img").animate({ opacity: op }, { duration: d });
$(".image3").animate( {left: '800px', top: t, height: h, width: w},
{ duration: d, complete: function () {
$(".image2 h4").css({ "color": "#000000" });
$(".image3 h4").css({ "visibility": "visible", "color": "#000000" });
}}
);
}}
);
}}
);
});