Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблемка с toggle (https://javascript.ru/forum/misc/53212-problemka-s-toggle.html)

Valentin1918 25.01.2015 11:34

Проблемка с toggle
 
При загрузке страницы блок 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 изображений');
});
});

рони 25.01.2015 11:40

Цитата:

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

1. в вашем коде нет toggle.
2. в jquery тоже нет toggle, про которое вы прочли в старой документации.
замена тут http://javascript.ru/forum/jquery/40...tml#post263492

Valentin1918 25.01.2015 11:48

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

ruslan_mart 25.01.2015 11:51

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

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

Valentin1918 25.01.2015 11:58

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

danik.js 25.01.2015 12:11

Цитата:

Сообщение от Valentin1918
toggle() - это и есть событие

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

danik.js 25.01.2015 12:12

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

рони 25.01.2015 12:30

mytoggle old toggle
 
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>

рони 25.01.2015 12:30

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

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


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

Valentin1918 25.01.2015 17: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)
    })


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


Часовой пояс GMT +3, время: 19:09.