jquery анимация и CSS позиция - PullRequest
Новая
       11

jquery анимация и CSS позиция

3 голосов
/ 25 мая 2011

Я пытаюсь исправить положение CSS в эффекте анимации с помощью jquery в приведенном ниже коде.

мой зеленый и оранжевый промежуток выходит из-под контроля при наведении мыши. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
.box1{
        width:40px;
        height:13px;
        float:left;
        font-size:.6em; color:#fff; background:#99CC00;
        font-family:Arial, Helvetica, sans-serif;
    }
.box2{
        width:40px;
        height:auto;
        float:left;
        font-size:.6em; color:#fff; background:#FF6600;
        font-family:Arial, Helvetica, sans-serif;
        margin-top:1px;
        opacity:.8;
        filter: alpha(opacity=75);
    }
</style>
<script>
$(function() {
            $('span').hover(function() {

                   $(this).stop().css({ 'z-index': '999999', 'position': 'absolute', 'float': 'left'}).animate({ marginTop: '0px', marginLeft: '0px', top: '0', left: '0', width: '200px', height: '125px', padding: '0px' }, 700, 'swing');


                }, function() {

                    $(this).stop().css({ 'z-index': '0', 'border': '0px' }).fadeIn('slow').animate({ marginTop: '0px', marginLeft: '0px', top: '0', left: '0', width: '40px', height: '13px', padding: '0px' }, 700, 'swing');


                });
            });

</script>


</head>

<body>
<table width="160" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="40" height="40" valign="top" bgcolor="#e4e4e4">
        <span class="box1">Hello ji</span>
        <span class="box2">Sanket</span>    </td>
    <td width="40" height="40" valign="top" bgcolor="#CCCCCC">&nbsp;</td>
    <td width="40" height="40" valign="top" bgcolor="#999999">&nbsp;</td>
    <td width="40" height="40" valign="top" bgcolor="#666666">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Впервые в jquery, очень ценю помощь.

Ответы [ 4 ]

1 голос
/ 25 мая 2011

Я немного поиграл с этим и получил, как мне кажется, правильный результат, основанный на том, что вы пытаетесь сделать.Я также сделал функции expandMenu() и collapseMenu() jQuery, чтобы можно было легко расширять / сворачивать, используя $(this).expandMenu();.Для демонстрации я также добавил вызов collapseMenu() к привязке click(), чтобы при щелчке по затраченному элементу он разрушался.

Рабочий образец: http://jsfiddle.net/sqCN5/4/

Обновлен CSS 

span{
    position: absolute;    
}
.box1{
    width:40px;
    height:13px;
    float:left;
    font-size:.6em; 
    color:#fff; 
    background:#99CC00;
    font-family:Arial, Helvetica, sans-serif;
}
.box2{
    top:25px;
    width:40px;
    height:auto;
    font-size:.6em; 
    color:#fff; 
    background:#FF6600;
    font-family:Arial, Helvetica, sans-serif;
    margin-top:1px;
    opacity:.8;
    filter: alpha(opacity=75);
}

Обновлен JS 

$('span').hover(function() {
    $(this).expandMenu();
}, function() {
    $(this).collapseMenu();
}).click(function(){
    $(this).collapseMenu();
});

$.fn.collapseMenu= function() {
    $(this)
        .stop()
        .css({ 
            'border': '0px' 
        })
        .fadeIn('slow')
        .animate({ 
            width: '40px', 
            height: '13px', 
            padding: '0px' 
        }, 700,'swing', function(){
            $(this).css({'z-index': '0'});
        });
    return ($(this));    
 };

$.fn.expandMenu= function() {
   $(this)
       .stop()
       .css({ 
           'z-index': '999999', 
           'border' : '1px solid #000'
       })
       .animate({ 
           width: '200px', 
           height: '125px', 
           padding: '0px' 
       }, 700, 'swing');
    return ($(this));    
 };
1 голос
/ 25 мая 2011

Не знаю, правильно ли я понял, но если вы сделаете это, как показано ниже, элементы span не изменят положение 

$(function() {
            $('span').hover(function() {

                   $(this).stop().css({  'float': 'left'}).animate({ marginTop: '0px', marginLeft: '0px', width: '200px', height: '125px', padding: '0px' }, 700, 'swing');


                }, function() {

                    $(this).stop().css({ 'border': '0px' }).fadeIn('slow').animate({ marginTop: '0px', marginLeft: '0px', width: '40px', height: '13px', padding: '0px' }, 700, 'swing');


                });
            });
0 голосов
/ 25 мая 2011

Я удалил 'position': 'absolute', и, кажется, лучше:

http://jsfiddle.net/gy7t9/

0 голосов
/ 25 мая 2011

Удалить 

top: '0', left: '0',

из обоих animate параметров функции

и удалить 

, 'position': 'absolute'

из первых css параметров функции

Добавьте: 

position:absolute;

в .box1 и .box2 классы CSS.

Добавьте 

z-index:10;

в .box1 класс CSS

Добавьте 

top: 25px;    
z-index:0;

к .box2 классу css

Установите .box2

margin-top:0px;

, чтобы предотвратить сотрясение.хочу?

Проверьте это:

http://jsfiddle.net/M9JkP/4/

...