Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2015, 12:34
Аспирант
Отправить личное сообщение для Valentin1918 Посмотреть профиль Найти все сообщения от Valentin1918
 
Регистрация: 10.01.2015
Сообщений: 44

Проблемка с 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 изображений');
});
});
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2015, 12:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

Сообщение от Valentin1918
toggle
1. в вашем коде нет toggle.
2. в jquery тоже нет toggle, про которое вы прочли в старой документации.
замена тут неразбериха с toggle
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2015, 12:48
Аспирант
Отправить личное сообщение для Valentin1918 Посмотреть профиль Найти все сообщения от Valentin1918
 
Регистрация: 10.01.2015
Сообщений: 44

упустил часть кода:
$(function(){
$('#rollInOut').toggle(
function(){
$('#block1').fadeOut(1000);
$(this).text('Развернуть нижние 5 изображений');
},
function(){
$('#block1').fadeIn(1000);
$(this).text('Свернуть нижние 5 изображений');
});
});
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2015, 12:51
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

$(function() {
    $('#rollInOut').click(function() {
         $('#block1').fadeToggle(1000);
    });
});
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2015, 12:58
Аспирант
Отправить личное сообщение для Valentin1918 Посмотреть профиль Найти все сообщения от Valentin1918
 
Регистрация: 10.01.2015
Сообщений: 44

Ruslan_xDD,
как нет событий? Так сам toggle() - это и есть событие.
Ответить с цитированием
  #6 (permalink)  
Старый 25.01.2015, 13:11
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Valentin1918
toggle() - это и есть событие
http://api.jquery.com/toggle/
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 25.01.2015, 13:12
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

В старых версиях - http://api.jquery.com/toggle-event/
В 1.9 удалено
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 25.01.2015, 13:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

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>

Последний раз редактировалось рони, 21.11.2019 в 14:22.
Ответить с цитированием
  #9 (permalink)  
Старый 25.01.2015, 13:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #10 (permalink)  
Старый 25.01.2015, 18:26
Аспирант
Отправить личное сообщение для Valentin1918 Посмотреть профиль Найти все сообщения от Valentin1918
 
Регистрация: 10.01.2015
Сообщений: 44

Короче сделал так:
<!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)
    })


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблемка с бордером элемента TH demoniqus (X)HTML/CSS 2 09.10.2013 13:15
слайдер и ф-ция toggle user_ua jQuery 1 27.12.2011 14:56
дождаться выполнения toggle maximu$$ jQuery 7 04.05.2011 14:58
toggle и мозила Extern jQuery 2 16.06.2010 17:58
Динамический JavaScript проблемка... andrys2007 Events/DOM/Window 3 06.12.2009 13:40