Форум

Valentin1918 · #1 (**permalink**) 25.01.2015, 12:34

При загрузке страницы блок rollInOut виден ровно долю секунды, а потом сразу изчезает, нижний блок на него как бы наезжает сверху и перекрывает.
Если JS отключить - все на своих местах.
По всей видимости JQuery событие toggle() как-то влияет на скрытие блока rollInOut, на который по сути задания необходимо нажать для свертывания и развертывания блока с фото.
Заранее всем большое спасибо за помощь!

html:
<body>
<div id="rollInOut">Свернуть нижние 5 изображений</div>
<div id="block1">
<div><img src="images/Logo/Logo.png"></div>
<div><img src="images/Logo/Logo.png"></div>
<div><img src="images/Logo/Logo.png"></div>
<div><img src="images/Logo/Logo.png"></div>
<div><img src="images/Logo/Logo.png"></div>
</div>
</body>

JS:
$(function(){
function(){
$('#block1').fadeOut(1000);
$(this).text('Развернуть нижние 5 изображений');
},
function(){
$('#block1').fadeIn(1000);
$(this).text('Свернуть нижние 5 изображений');
});
});

рони · #2 (**permalink**) 25.01.2015, 12:40

Сообщение от Valentin1918

toggle

1. в вашем коде нет toggle.
2. в jquery тоже нет toggle, про которое вы прочли в старой документации.
замена тут неразбериха с toggle

Valentin1918 · #3 (**permalink**) 25.01.2015, 12:48

упустил часть кода:
$(function(){
$('#rollInOut').toggle(
function(){
$('#block1').fadeOut(1000);
$(this).text('Развернуть нижние 5 изображений');
},
function(){
$('#block1').fadeIn(1000);
$(this).text('Свернуть нижние 5 изображений');
});
});

ruslan_mart · #4 (**permalink**) 25.01.2015, 12:51

Так тут нет никаких событий, просто две ф-ции с синтаксической ошибкой.

$(function() {
    $('#rollInOut').click(function() {
         $('#block1').fadeToggle(1000);
    });
});

Valentin1918 · #5 (**permalink**) 25.01.2015, 12:58

Ruslan_xDD,
как нет событий? Так сам toggle() - это и есть событие.

danik.js · #6 (**permalink**) 25.01.2015, 13:11

Сообщение от Valentin1918

toggle() - это и есть событие

http://api.jquery.com/toggle/

danik.js · #7 (**permalink**) 25.01.2015, 13:12

В старых версиях - http://api.jquery.com/toggle-event/
В 1.9 удалено

рони · #8 (**permalink**) 25.01.2015, 13:30

Valentin1918,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $.fn.mytoggle = function() {
    var b = arguments;
    return this.each(function(i, el) {
        var a = function() {
            var c = 0;
            return function() {
                b[c++ % b.length].apply(el, arguments)
            }
        }();
        $(el).click(a)
    })
};
$(function() {
    $("#rollInOut").mytoggle(function() {
        $("#block1").fadeOut(1000);
        $(this).text("Развернуть нижние 5 изображений")
    }, function() {
        $("#block1").fadeIn(1000);
        $(this).text("Свернуть нижние 5 изображений")
    })
});
  </script>
</head>

<body>
<div id="rollInOut">Свернуть нижние 5 изображений</div>
 <div id="block1">
 <div><img src="images/Logo/Logo.png"></div>
 <div><img src="images/Logo/Logo.png"></div>
 <div><img src="images/Logo/Logo.png"></div>
 <div><img src="images/Logo/Logo.png"></div>
 <div><img src="images/Logo/Logo.png"></div>
 </div>
</body>

</html>

рони · #9 (**permalink**) 25.01.2015, 13:30

Valentin1918,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Valentin1918 · #10 (**permalink**) 25.01.2015, 18:26

Короче сделал так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test2</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#rollInOut').click(function(){
                $('#newBlock10').fadeToggle();
                $('#newBlock11').fadeToggle("slow");
                $('#newBlock12').fadeToggle(3000);
            });
        });
    </script>
    <style type="text/css">
        #rollInOut {
            text-decoration: underline;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="rollInOut">Убрать/показать нижние изображения</div>
<div id="newBlock10"><img src="images/Logo/Logo.png"></div>
<div id="newBlock11"><img src="images/Logo/Logo.png"></div>
<div id="newBlock12"><img src="images/Logo/Logo.png"></div>
</body>
</html>

Просто в этом куске кода я вообще ничего не понимаю:

$.fn.mytoggle = function() {
    var b = arguments;
    return this.each(function(i, el) {6
        var a = function() {
            var c = 0;
            return function() {
                b[c++ % b.length].apply(el, arguments)
            }
        }();
        $(el).click(a)
    })

А использовать то, чего я еще не понимаю считаю неправильно.
Всем спасибо за помощь.

Форум

Справочник

Discord чат

Курсы javascript