Привязка HTML и jQuery - PullRequest
Новая
       29

Привязка HTML и jQuery

1 голос
/ 31 мая 2010

Всякий раз, когда URL содержит идентификатор div, он, очевидно, будет переходить к div, когда URL имеет:

http://domain.com.faq.php # 1 

<div id="1">Bla bla bla</div>

Но мне нравится иметь ту же функцию Stackoverflow, когда вы нажимаете на ответ в своих сообщениях, он прокручивается вниз на страницу и оказывает эффект fadeOut на ответ.

Как мне это сделать?

Ответы [ 3 ]

3 голосов
/ 31 мая 2010

Анимация к действительному назначению привязки не может быть анимирована при загрузке страницы, о которой я знаю, так как браузеры по умолчанию будут прокручивать пользователя вниз по странице до привязки. Для ссылок на странице, вы можете захватить ссылки и анимировать.

Однако, при загрузке новой страницы, как при SO, вы заметите, что страница не оживляет вниз, а просто прокручивается вниз, хотя поле действительно оживляет цвет. Вот как вы могли бы сделать это в JQuery. Не забудьте включить плагин color, если вы хотите анимировать фоновые цвета. 

<script src="js/jquery.color.js"> </script>
<script type="text/javascript">
   $(window).load(function(){
        var hash = window.location.hash;
        if(hash){
          $(hash).css('backgroundColor', '#AA0000')
                 .animate({backgroundColor: '#FFFFFF'}, 200);
        }
   });
</script>

Вы можете использовать DOMReady вместо загрузки, но он может попытаться запустить анимацию слишком рано, и пользователь пропустит ее.

Если вы хотите анимировать div только с определенным классом, вы можете добавить фильтр к вашей находке: 

$(hash).filter('.my_div').css ...
0 голосов
/ 31 мая 2010

Использование: 

event.preventDefault();

Например: 

$('li.share a').click(function(ev) {
        ev.preventDefault();
        var link = ev.target.href;
        var id = link.substring(link.indexOf("#") + 1);
        $('#' + id).fadeOut();
    });
0 голосов
/ 31 мая 2010

StackOverflow также использует якоря. Сообщение, которое вы сейчас читаете: HTML и jQuery привязка

Это просто <a name="anchorName"></a>
в адресной строке: [urlToPage] #anchorName

Теперь, чтобы получить эффект затухания [в чистых JS без каркасов]

Установить div.style.opacity = 0; 

var intervalId = setInterval( function(){
  if( (div.style.opacity+= 0.1) >= 1) clearInterval(intervalId);
}, millisecondInterval);

Часть clearInterval не обязательна, поскольку, если непрозрачность становится больше 1, браузер не будет отображаться по-другому [хотя число продолжает добавляться ...]

...