2013-05-23 2 views
1

Прежде всего, я совершенно новый для 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> 
+0

добавить jsfiddle для его – Dreamwalker

+0

Вы видите какие-либо ошибки в консоли ошибок Firefox? – cfs

ответ

3

You необходимо передать объект события i Nto ваш клик обработчика:

$("a.temp").click(function (event) {...} 

Это ошибка из Firebug консоли в FF:

ReferenceError: event is not defined

+0

потрясающий! спасибо cfs. похоже, у меня еще есть долгий путь, чтобы узнать :) – Pascamel

+0

@Pascamel Это было хорошее начало :) Удачи! – cfs

+1

@Pascamel: Посмотрите на получение firebug. Это поможет вам с отладкой в ​​Firefox. –

Смежные вопросы