通過點擊另一個div滑出div

我點擊箭頭形div創建了兩個div，它會滑出隱藏的div。與論壇上發佈的小提琴類似。由於某種原因，它不起作用。通過點擊另一個div滑出div

這是我到目前爲止所做的：Fiddel 任何幫助，高度讚賞。

HTML

<div id="slideout"> 
<div id="containclickme"> 
    <div class="metro three-d" id="click-me"></div> 
</div> 
</div>

CSS

body { 
direction:rtl; 
} 
#slideout { 
background: #666; 
position: relative; 
width: 300px; 
height: 80px; 
right:-300px; 
margin-top:50px; 
top:100%; 
bottom:100%; 
} 
.metro { 
display: inline-block; 
padding: 5px; 
margin: 50px; 
width:1px; 
height:19.5px; 
background: #117ebb; 
color: white; 
font-weight: bold; 
text-decoration: none; 
} 
.metro.three-d { 
position: relative; 
box-shadow: 1px 1px #003355, 2px 2px #003355, 3px 3px #003355; 
transition: all 0.1s ease-in; 
} 
.metro.three-d:active { 
box-shadow: none; 
top: 3px; 
left: 3px; 
} 
.metro.three-d:after { 
transition: all 0.1s ease-in; 
position:absolute; 
top:0px; 
left:-13px; 
content:" "; 
width: 0; 
height: 2px; 
border-top: 13px solid transparent; 
border-bottom: 15px solid transparent; 
border-right:13px solid #117ebb; 
border-radius:0px 0px 0px 20px; 
} 
#containclickme { 
background: transparent; 
float:left; 
height:100%; 
bottom:100%; 
width:20px; 
margin-top:-25px; 
} 
#click-me { 
position:right; 
left:30px; 
}

jQuery的

$(function() { 
$("#clickme").toggle(function() { 
    $(this).parent().parent().animate({ 
     right: '0px' 
    }, { 
     queue: false, 
     duration: 500 
    }); 
}, function() { 
    $(this).parent().parent().animate({ 
     right: '-300px' 
    }, { 
     queue: false, 
     duration: 500 
    }); 
    }); 
});

來源

2013-03-11 Yasser Alwan

只需要指出，以這種方式使用'toggle（）'[已在jQuery 1.9 +中折舊]（http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed）。 – 2013-03-11 17:01:05

你的代碼是正確的，除了錯誤的ID ..檢查我的答案 – 2013-03-11 17:10:04

你是非常接近的）！

http://jsfiddle.net/zxu7w/

$(function() { 
    // cache the sliding object in a var 
    var slideout = $('#slideout'); 
    // "click-me" is what is in your html not "clickme" 
    $("#click-me").toggle(function() { 
     // use cached object instead of searching 
     slideout.animate({ 
      right: '0px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }, function() { 
     // use cached object instead of searching   
     slideout.animate({ 
      right: '-300px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }); 
});

來源

2013-03-11 17:03:23 Fresheyeball

謝謝alooot，像一個魅力工程：D – 2013-03-11 17:06:38

這不是因爲錯誤ID的工作，你使用

您使用$("#clickme")

應該$("#click-me")

與該改變它的再次檢查你的代碼我會像魅力一樣工作

來源

2013-03-11 17:09:24

通過點擊另一個div滑出div

回答

相關問題