jQuery странная проблема с Opera и slideToggle () - PullRequest
Новая
       3

jQuery странная проблема с Opera и slideToggle ()

1 голос
/ 23 января 2011

У меня странная проблема с jQuery и Opera.Когда я использую slideToggle (), он отлично работает в Firefox, Chorme, Safari и даже в IE, но не в Opera.В Opera движение несколько сломано: сначала оно немного двигается, затем останавливается и, наконец, прыгает прямо к концу.

Вот мой код:

$ ("# new").hover (function () {$ (". intro"). slideToggle (300)})

И ссылка:

Имя чего-то Введение чего-то

Самая странная проблема здесь: когда я добавляю другую ссылку (такую ​​же, как другая, ожидаю другой идентификатор), тогда Opera прекрасно загружает оба вступления.Но только с одним вступительным интервалом, это не гладко.

Код теперь и на jsFiddle (http://jsfiddle.net/3YstS/6).

Ответы [ 2 ]

0 голосов
/ 28 января 2011

Как показано в моих предыдущих скрипках

http://jsfiddle.net/3YstS/9/ & http://jsfiddle.net/3YstS/10/

Я обнаружил, что есть некоторые серьезные несоответствия в том, как Opera обрабатывает это, сейчас я буду считать это ошибкой в ​​Opera.

Однако нашли решение http://jsfiddle.net/3YstS/13/

На самом деле, это проблема CSS Float. Когда вы снимаете поплавок, проблема исчезает.

Проблема решена.

Если вам нужно выровнять .name div по правому краю, вы должны обернуть его в div с положением: относительное применено и затем применить положение: абсолютное и правое: 0 в .name div.

как то так 

.new {
display: block;
width: 594px;
height: 100px;
position: relative;
border: 1px solid #000;
}
.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.bottom div { 
    position:relative
}
.name {
    font-size: 15px;
    font-weight: bold;
    padding: 6px;
    position:absolute; right:0; top:-29px;
    background: #00FF00;
}        
.intro {
    clear: both;
    width: 584px;
    font-size: 14px;
    padding: 5px;
    display: block;
    background: #00FF00;
}

Надеюсь, это поможет вам всем, а может быть, даже самой Опере.

0 голосов
/ 26 января 2011

тесты Blowsie в комментариях действительно показывают, что есть ошибка. Странное поведение. Вы сообщили об этом на Мастер ошибок Opera .

Размещение здесь хорошего кода, чтобы люди имели ссылку на случай, если jsfiddle исчезнет.

JAVASCRIPT 

$(".new").hover(function(){
    $(this).find('.intro').stop(true,true).slideToggle(300)
})

HTML код 

    <div><a href="#" class="new">
    <span class="bottom">
        <span class="name">
            The name of something
        </span>
        <span class="intro" style="display: none;">
            The introduction of something
        </span>
    </span>
</a></div>
<div style="clear:both"><br/></div>
<div><a href="#" class="new">
    <span class="bottom">
        <span class="name">
            The name of something
        </span>
        <span class="intro" style="display: none;">
            The introduction of something
        </span>
    </span>
</a>
</div>
<div style="clear:both"><br/></div>
<div><a href="#" class="new">
    <span class="bottom">
        <span class="name">
            The name of something
        </span>
        <span class="intro" style="display: none;">
            The introduction of something
        </span>
    </span>
</a>
</div>
<div style="clear:both"><br/></div>
<div><a href="#" class="new">
    <span class="bottom">
        <span class="name">
            The name of something
        </span>
        <span class="intro" style="display: none;">
            The introduction of something
        </span>
    </span>
</a>
</div>
<div style="clear:both"><br/></div>

Код CSS 

.new {
    display: block;
    width: 594px;
    height: 100px;
    position: relative;
    border: 1px solid #000;
}

    .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }


    .name {
        font-size: 15px;
        font-weight: bold;
        padding: 6px;
        float: right;
        background: #00FF00;
        }

        .intro {
            clear: both;
            width: 584px;
            font-size: 14px;
            padding: 5px;
            display: block;
            background: #00FF00;
        }
...