Элемент img растёт и сжимается, перемещается по диагонали для слайда / слайда с помощью jQuery - PullRequest
0 голосов
/ 26 августа 2018

У меня проблема с элементом img, который показывает и скрывает в ответ на наведение курсора на заголовок этой страницы с функциями Javascript slideup () и slidedown (). Это не предназначенная для работы панель инструментов, это просто изображение панели инструментов из старой видеоигры. Он показывает и скрывает в ответ на наведение мыши и указатель мыши, но по какой-то причине он перемещается по диагонали, начиная с очень маленького размера и расширяясь слева направо в то же время, когда скользит вниз, и делает обратное, когда скользит вверх. Я просто хочу, чтобы он скользил вверх и вниз в полном размере.

Вот соответствующий бит jQuery:

<script>
$(document).ready(function()
{
    $("#game-toolbar").hide();
    $("#main-title").mouseover(function()
    {
        $("#game-toolbar").slideDown("slow");
    });
    $("#main-title").mouseout(function()
    {
        $("#game-toolbar").slideUp("slow");
    });
});
</script>

Страница использует jQuery 2.2.4 и Bootstrap 3.3.7, а моя собственная таблица стилей указана после них в заголовке документа. Я удостоверился, что ссылка на jQuery перед Bootstrap. Правила стиля, применимые к панели инструментов, приведены здесь:

#game-toolbar {
    max-height: 35px; 
    max-width: 354px; 
    position: fixed; 
    top: 0; 
    left: 8%; 
    z-index: 16; 
}
img {
    display: block; 
    margin: auto;  
    text-align: center; 
}
img {
    border: none; 
}
...