Jquery fadeIn

[apexis]

Скопировал пример Jquery fadeIn, но у меня он не работает. Все мозги сломал, но ошибку не нашел. Может вы увидите? Ссылка http://test.parkes.org.ua/1.php

Edited June 3, 2013 by apexis

[klierik]

Оформи, пожалуйста, пост соответствующе: Как правильно оформить вопрос/проблему

[lexxcode]

Готовность DOM нужно проверять И да нужно правильно оформлять посты

[klierik]

<script type="text/javascript">
    $(document).ready(function(){
        $('#clickme').click(function() {
            $('#book').fadeIn('slow', function() {
                // Animation complete
            });
        });
    });
</script>

Попробуй так.

[apexis]

Работает. Спасибо. Можете объяснить зачем и когда нужно DOM проверять? И как сделать чтобы проявленный элемент пропадал через пару секунд?

Edited June 3, 2013 by apexis

[klierik]

Я делаю проверку DOM всегда. Возможно избыточно, но работает гарантированно.

Дело в том что ты не сможешь предугадать кто раньше загрузить DOM или скрипт.

В данном случае скрипт грузится раньше, ибо он ближе к началу документа.

<script type="text/javascript">
    $(document).ready(function(){
        $('#clickme').click(function() {
            $('#book').fadeIn('slow', function() {

                setTimeout(function() {
                    $("#book").hide('blind', {}, 500)
                }, 5000);

            });
        });
    });
</script>

или

<script type="text/javascript">
    $(document).ready(function(){
        $('#clickme').click(function() {
            $('#book').fadeIn('slow', function() {

                $("#book").delay(5000).fadeOut();

            });
        });
    });
</script>

[apexis]

Я делаю проверку DOM всегда. Возможно избыточно, но работает гарантированно.

Дело в том что ты не сможешь предугадать кто раньше загрузить DOM или скрипт.

В данном случае скрипт грузится раньше, ибо он ближе к началу документа.

<script type="text/javascript">
$(document).ready(function(){
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {

setTimeout(function() {
$("#book").hide('blind', {}, 500)
}, 5000);

});
});
});
</script>

или

<script type="text/javascript">
$(document).ready(function(){
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {

$("#book").delay(5000).fadeOut();

});
});
});
</script>

Огромное спасибо. Вы мне очень помогли

[apexis]

Заметил, что если будет 2 и более кнопки, то работает только первая. Почему так?

Edited June 3, 2013 by apexis

[klierik]

потому что к кнопкам идет привязка по ID.

если использовать Class Name, то будет работать как надо.

[apexis]

Извините за настойчивость. Как сделать 36 кнопок и 36 пропадающих контейнеров?

[klierik]

<script type="text/javascript">
    //$(document).ready(function(){
        $('.book-link').click(function(event) {
            event.preventDefault();

            var id = $(this).attr("href");
            $(id).fadeIn('slow', function() {

                $(this).delay(5000).fadeOut();

            });
        });
    });
</script>

<a class="book-link" href="#book_1">Show book 1</a>
<a class="book-link" href="#book_2">Show book 2</a>
<a class="book-link" href="#book_3">Show book 3</a>

<div id="book_1" style="display: none;">Book #1</div>
<div id="book_2" style="display: none;">Book #2</div>
<div id="book_3" style="display: none;">Book #3</div>

[apexis]

А как быть если вместо ссылок у меня

<input type="image" title="В корзину" src="/img/herbal/buy.png" name="my-add-button" value="В корзину" class="addButton" />

?

[apexis]

Нашел вот такое решение

<script type="text/javascript">
	    $(document).ready(function(){
			    $('.book-link').click(function(event) {
					    event.preventDefault();
					    var i=$(this).data('id');
					    $('#d'+i).fadeIn('slow', function() {
							    $(this).delay(1000).fadeOut();
					    });
			    });
	    });
</script>
<input data-id='1' type="image" title="В корзину" src="/img/herbal/buy.png" name="my-add-button" value="В корзину" class="book-link" />
<div id="d1" style="display: none;">Book #1</div>

[klierik]

я отталкивался от того что бы показать пример. а на какую конструкцию вешать тут уж каждому своё.

при такой разметке я, скорее всего, сделал бы также.