Я не могу сделать переход мышью / мышью JQuery div на Tumblr

Question

Я не могу сделать переход мышью / мышью JQuery div на Tumblr

0

Это мой первый раз, используя любую форму JavaScript и после нескольких часов тщательной игры с этим кодом я в недоумении. Я не могу быть единственным.

Я пытаюсь создать эффект перехода, который начинается с div, содержащего текст "HOVER". Когда он замалчивается, он расширяет другой текстовый div, скрывая div "HOVER". Когда мышь будет удалена, возвращается "HOVER".

Хотя я действительно думаю, что понял код и работает на JSFiddle (только как JQuery OnLoad), он не будет работать на Tumblr. Я могу получить анимацию, расширяющую зависание, но второй текстовый div не заменит div "HOVER". Разница "HOVER" всегда видна.

Я попытался изменить ссылки src для Tumblr, чтобы распознавать и загружать JQuery, я пытался разместить расширение триггера на теге body (возможно, это было неправильно), и я попытался вставить коды в заголовок, после тега исходного тега и перед тегом закрывающего тела.

Сценарий в моем заголовке:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>

<script>
    $('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2').show();
    $('#descriptiontext1').hide();
        });
});

$('#descriptiontext2'').on('mouseout', function () {
    $('#descriptiontext1').show();
    $('#descriptiontext2').hide();
        });
});
</script>

CSS:

#description2 {
    z-index: 999;
    position:fixed;
    text-align:justify;
    left:0px;
    top:436px;
    margin-left:70px;
    width: 150px;
    height:15px;
    padding:1px;
    border:1px solid #ccc;
    font-family:'brie';
    font-size:10px;
    background-color: #fff;
    overflow-y:none;
    overflow-x:none;
    opacity:0.9;
    filter:alpha(opacity=90);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#description2:hover {
    z-index: 999;
    position:fixed;
    left:0px;
    top:355px;
    margin-left:20px;
    width: 232px;
    height:150px;
    padding:15px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#descriptiontext1 {
    padding:0px;
    text-align: center;
    font-family:'brie';
    font-size:10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#descriptiontext2 {
    padding:15px;
    font-family:'brie';
    font-size:10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    display: none;
}

HTML:

<div id="description2">
<div id="descriptiontext1">HOVER</div>
<div id="descriptiontext2">TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN</div></div>

user3550779 19 апр. 2014, в 06:19

Источник

0

Не могли бы вы добавить ссылку на журнал ошибок, отображающий проблему. Убедитесь, что ваш код JQuery находится после разметки. Я также хотел бы спросить, почему вы включаете две версии jQuery.
mikedidthis 21 апр. 2014, в 23:36

Теги:

javascript

jquery

transition

mouseover

tumblr

3 ответа

Ещё вопросы

Не могли бы вы добавить ссылку на журнал ошибок, отображающий проблему. Убедитесь, что ваш код JQuery находится после разметки. Я также хотел бы спросить, почему вы включаете две версии jQuery.

ravi · Answer 1 · 2014-04-19T03-06-00.000Z

Быстрый способ, если вы хотите сделать это заранее, вы можете использовать на прослушивании событий для мыши, мыши и функций для лучшей читаемости и оптимизации. Также вам не нужно использовать js для скрытия и отображения, вы также можете использовать css3.

$('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2, #descriptiontext1').toggle();
});

$('#descriptiontext2').on('mouseout', function () {
    $('#descriptiontext2, #descriptiontext1').toggle();
});

Это дало мне те же результаты, что и раньше. Я пытался использовать только CSS, чтобы выполнить то, что хотел, но он не заменил бы первый div вторым, он просто расширил бы второй под ним. Вместе с тем, это не будет скрывать второй div. Это появилось бы ниже первого. Вот почему я начал вникать в это, к сожалению. Что за беспорядок ):

Tim Vermaelen · Answer 2 · 2014-04-19T02-16-00.000Z

Оберните привязки событий внутри события готовности DOM. Это довольно часто встречается в jQuery и очень важно для устранения проблем с загрузкой.

// once the DOM is ready
$(function(){
    $('#descriptiontext1').on('mouseover', function () {
        $('#descriptiontext2').show();
        $(this).hide();
    });

    $('#descriptiontext2').on('mouseout', function () {
        $('#descriptiontext1').show();
        $(this).hide();
    });
});

Также обратите внимание, что jQuery поддерживает функцию переключения, которая автоматически обрабатывает/переключает show() и hide(). Не протестировали его, но что-то вроде этого может работать для вас, если descriptiontext2 скрыт по умолчанию:

$(function(){
    var descriptions = $('#descriptiontext1, #descriptiontext2');

    descriptions.on('mouseover, mouseout', function () {
        descriptions.toggle();
    });
});

DEMO

Простите, что я совершенно новичок в этом, но не могли бы вы объяснить или предложить четкое руководство о том, как обернуть мои привязки событий в DOM? Я пытался возиться с тем, что я мог найти на нем, но я на 100% уверен, что я делаю это неправильно. Я также попробовал последнее с теми же результатами. Заранее спасибо.
Ваша проблема начинается при загрузке страницы, он берет head первым, загружает библиотеку JQuery (+ -100ms). Он продолжает связывать ваши события, ища $('#descriptiontext1') и 2 (+ -200ms), но эти объекты будут пустыми. Только тогда загружается HTML (+ -300мс). Используя обработчик готовности DOM, привязка вашего события удерживается до тех пор, пока ваш HTML не будет загружен. Только тогда вы можете быть уверены, что объекты найдены.
Смотрите скрипку здесь . Также обратите внимание на селекторы CSS и jQuery, # для атрибута id . . для атрибута class . Кажется, что оба варианта работают как ожидалось. Не уверен, почему вы включаете 2 версии jQuery. Попробуйте перейти на 1.11.0 вместо этого.
Также посмотрите на плохие цитаты в тегах вашего script !!! ” Не "
Спасибо большое за вашу помощь. К сожалению, я попробовал это, и я все еще получаю тот же результат. Также пробовал с копией 1.11.0 и без второй версии jquery. Я не уверен, почему не так с Tumblr. Он работает отдельно от Tumblr, но не внутри кода Tumblr.

Kiranramchandran · Answer 3 · 2014-04-19T01-04-00.000Z

изменение

$('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2').show();
    $('#descriptiontext1').hide();
        });
});

$('#descriptiontext2'').on('mouseout', function () {
    $('#descriptiontext1').show();
    $('#descriptiontext2').hide();
        });
});

к

$.noConflict();
    $(function () {
        $('#descriptiontext1').on('mouseover', function () {
            $('#descriptiontext2').show();
            $('#descriptiontext1').hide();
        });

        $('#descriptiontext2').on('mouseout', function () {
            $('#descriptiontext1').show();
            $('#descriptiontext2').hide();
        });
    });

ДЕМО ЗДЕСЬ

используйте $.noConflict(); потому что вы используете две версии библиотеки jquery. вы можете увидеть полную документацию здесь

К сожалению, это дало мне тот же результат, который я уже получал. ):
проверьте мой отредактированный ответ
Попробовал ваше редактирование со второй версией библиотеки jquery и без нее. Я не уверен, почему не так с Tumblr. Он работает отдельно от Tumblr, но не внутри кода Tumblr.
посмотрите на консоль вашего браузера, он показывает ошибки