setTimeout с window.location и $ (это) - PullRequest
Новая
       25

setTimeout с window.location и $ (это)

3 голосов
/ 08 ноября 2010

Я относительно новичок в этом, и мне было интересно, если кто-нибудь может указать мне в правильном направлении!Я пытаюсь оживить некоторые аспекты загрузки страницы при нажатии на ссылки меню. 

$("document").ready( function() {

      $('.page_box_fade').css("display", "none")        
      .fadeIn('300');

      $(".nav_image").click( function(){

            $('.page_box_fade').fadeOut('300');                                 
            document.location = $(this).parent().attr("href");

            return false;           
      });
});

Этот код работает нормально (ish), когда я нажимаю на изображение «.nav_image», котороесодержащийся в ссылке, он скрывает содержимое div '.page_box_fade' и одновременно перенаправляет на атрибут 'href' родительской ссылки, по которой щелкнули .nav_image.Поскольку замирание составляет 300 мс, я бы хотел, чтобы скрипт включал его до перенаправления, чтобы замирание действительно было видно пользователю.

$("document").ready( function() {

    $(".nav_image").click( function(){

            $('.page_box_fade').fadeOut('300');                                 
            setTimeout( "document.location = $(this).parent().attr('href')", 500 );

            return false;           
    });
});

Я предполагаю, что setTimeout будет ответом, но $ (this) .parent (). Attr ('href') не определено, если используется так, как я думал.

Этоструктура моего HTML, простая ссылка: 

<a href="?id=0">
    <img class="nav_image" src="images/home.png" alt="home" />
</a>

Любая помощь по этому вопросу будет принята с благодарностью:)

Ответы [ 3 ]

5 голосов
/ 08 ноября 2010

Вы можете просто сохранить href раньше, например: 

$(function() {
  $(".nav_image").click( function(){
    $('.page_box_fade').fadeOut('300');                                 
    var href = $(this).parent().attr('href');
    setTimeout(function() { window.location.href = href; }, 500 );
    return false;           
  });
});

Это делает несколько изменений:

  • "document" не подходит для селектора, используйте $(document).ready() или ярлык выше.
  • Кроме того, не передавайте строку в setTimeout(), используйте функцию, как указано выше.
  • Не используйте this внутри функции setTimeout(), если вы не устанавливаете контекст, в противном случае this будет window, а не вашей clicked ссылкой (что в конечном итоге является вашей текущей проблемой). 1020 *

Альтернативой является просто перенаправление, когда вы обращены наружу (хотя оно будет перенаправлено через 300 мс, а не через 500 мс), например: 

$(function() {
  $(".nav_image").click( function(){                            
    var href = $(this).parent().attr('href');
    $('.page_box_fade').fadeOut('300', function() { 
      window.location.href = href; 
    });
    return false;           
  });
});
1 голос
/ 08 ноября 2010

Вам необходимо использовать аргумент обратного вызова fadeOut, который вызывается после завершения анимации: 

var link = this;
$('.page_box_fade').fadeOut('300', function() {
    window.location.href = $(link.parentNode).attr('href');
});
0 голосов
/ 08 ноября 2010 
$(function() {

  var work = false;
  $(".nav_image").click( function(ev){

    if (work)
       return false;

    work = true;

    var _this = this;

    $('.page_box_fade').fadeOut('300', function() {
       setTimeout(function(){
          window.location.href = $(_this).parent().attr('href');
       }, 500 );
    });

    return false;

  });
});
...