Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Срочно прошу помочь! Не могу сделать наезд одного блок на другой!
 
 автор: Belkin   (06.03.2012 в 02:12)   письмо автору
 
 

Все просто, по клику один блок должен наехать на другой.. я пытался z-index использовать, но нет.. сейчас по клику блок просто подвигает второй, а нужно чтобы он заезжал на него! Прошу помочь!

Вот код, просто вставьте и посмотрите:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

    $('#but').toggle(function() {
        $('#b1').animate({ 
            "margin-left" : "100px" 
        }, {duration: "600", queue: false});
    }, 
    function() {
        $('#b1').animate({ 
            "margin-left" : "0px" 
        }, {duration: "600", queue: false});
    });

});
</script>
    
<style>
#but {
    display: block;
    float: left;
    margin-bottom: 50px;
    padding-top: 15px;
    width: 100%;
    height: 35px;
    background: red;
    color: #fff;
    cursor: pointer;
    text-align: center;
}

#b1 {
    float: left;
    width: 200px;
    height: 200px;
    border: solid 1px #ccc;
    background: #ddd;
    position: relative;
    z-index: 9999;
}
 
#b2 {
    float: left;
    width: 200px;
    height: 200px;
    border: solid 1px #4a7497;
    background: #8daac3;
    position: relative;
    z-index: 0;
}

</style>

<div id="but">GO</div>
<div id="b1"></div>
<div id="b2"></div>

  Ответить  
 
 автор: cheops   (06.03.2012 в 14:08)   письмо автору
 
   для: Belkin   (06.03.2012 в 02:12)
 

Замените "margin-left" на "left"
$(document).ready(function() { 

    $('#but').toggle(function() { 
        $('#b1').animate({  
            "left" : "100px"  
        }, {duration: "600", queue: false}); 
    },  
    function() { 
        $('#b1').animate({  
            "left" : "0px"  
        }, {duration: "600", queue: false}); 
    }); 

});

  Ответить  
 
 автор: Belkin   (07.03.2012 в 00:24)   письмо автору
 
   для: cheops   (06.03.2012 в 14:08)
 

действительно просто ) Спасибо!

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования