Прежде всего, я совершенно новый для JQuery (я больше разработчиков настольных приложений)JQuery Переход работает только на Chrome
Я пытаюсь построить мой первый код JQuery, который состоит из " скользящего "перехода между 3 DIV.
Я не могу понять, почему он работает только на Chrome, а не на FF или IE. Ни первый, ни второй не хотят двигаться или скрываться.
Любая помощь по этому вопросу будет принята с благодарностью, спасибо заранее!
вот мой текущий код:
JQuery:
$(function() {
var contentWidth = '-' + ($('.content').width() + 1000) + 'px';
$('.content').css({
position: 'absolute',
left: contentWidth
});
$('#ligne1')
.animate({ left: 100 },"fast")
.addClass('visible');
$("a.temp").click(function() {
event.preventDefault();
var $blockID = $($(this).attr('href'));
if ($blockID.hasClass('visible')) { return; }
$('.content.visible')
.removeClass('visible')
.animate({ left: $(window).width() }, function() {
$(this).css('left', contentWidth);
});
$blockID
.addClass('visible')
.animate({ left: 100 }, 1000);
});
});
Вот мой CSS:
.wrapper { position: relative;}
.content { width: 900px; height: 300px; padding: 0; left: 0; top: 0; }
.box { width: 900px; height: 300px; }
#ligne1 .box { background: green; }
#ligne2 .box { background: yellow; }
#ligne3 .box { background: red; }
И, наконец, вот мой HTML:
<a class="temp" href="#ligne1">One</a>
<a class="temp" href="#ligne2">Two</a>
<a class="temp" href="#ligne3">Three</a>
<div class="wrapper" style="style="position: absolute; left: 50%; ">
<div id="ligne1" class="content">
<div class="box"></div>
</div>
<div id="ligne2" class="content">
<div class="box"></div>
</div>
<div id="ligne3" class="content">
<div class="box"></div>
</div>
</div>
добавить jsfiddle для его – Dreamwalker
Вы видите какие-либо ошибки в консоли ошибок Firefox? – cfs