[英]Unable to get div to animate from left to right in jQuery
I have a list which serves as a menu. 我有一个列表作为菜单。 Every time user clicks on one of the elements in the list, I want a more detailed div
to slide in from left to right. 每次用户点击列表中的某个元素时,我都希望从左到右滑动更详细的div
。
So if the user was to click menu item A
first, A
slides from left to right. 因此,如果用户首先单击菜单项A
,则A
从左向右滑动。 If the user then clicks B
, A
slides out from right to left (disappears off screen) and B
slides in. 如果用户然后单击B
, A
从右向左滑出(从屏幕上消失), B
滑入。
I searched for this problem and found this post . 我搜索了这个问题,发现了这篇文章 。 I incorporated the code from the jsfiddle
, but it didn't work. 我合并了来自jsfiddle
的代码,但它没有用。 No errors are being shown in the js log in Chrome debugging tool. Chrome调试工具中的js日志中未显示任何错误。 Nothing happens when I click any item from the menu. 单击菜单中的任何项目时没有任何反应。 What am I doing wrong? 我究竟做错了什么?
<div class="project">
<ul id="project_menu" class="project_menu">
<li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li>
<li id="menu-nodejs" data-projectID="node-project">NodeJS</li>
<!-- more code -->
</ul>
<div class="project-detail">
<div id="php-project">
<i class="ion-ios-close-empty close-icon js-close-icon"></i>
<div classs="project-text">
<!-- data about project -->
</div>
</div>
<div id="node-project">
<i class="ion-ios-close-empty close-icon js-close-icon"></i>
<div classs="project-text">
<!-- data about project -->
</div>
</div>
<!-- and so on.. -->
#php-project {
background-color: #9b59b6;
margin: 30px;
display: none;
}
$(document).ready(function() {
itemsToRender = [];
$('ul#project_menu li').click(function(e) {
menuItemId = (e.currentTarget.id);
$('.common').hide();
$(getProjectId(menuItemId)).css('display', 'inline');
var value = $(getProjectId(menuItemId)).css('right') === '100px' ? '-100px' : '100px';
$(getProjectId(menuItemId)).animate({
right: value
}, 800);
});
});
function getProjectId(menuItemId) {
if (menuItemId.indexOf('php') > 0) {
return '#php-project';
} else if (menuItemId.indexOf('node') > 0) {
return '#node-project';
} else if (menuItemId.indexOf('angular') > 0) {
return '#angular-project';
} else if (menuItemId.indexOf('mean') > 0) {
return '#mean-project';
}
}
Update1 : @user5325596 pointed out that my display property for the detail div
was set to none, so I fixed that by adding the following: UPDATE1: @ user5325596指出,我对细节的显示属性div
设置为无,所以我固定的,加入以下内容:
$(getProjectId(menuItemId)).css('display', 'inline-block');
right after $('.common').hide()
. 紧跟在$('.common').hide()
。
Now, I can see the detail div when I click on the menu item, but it does not animate. 现在,当我点击菜单项时,我可以看到细节div,但它没有动画。
Update2 : I have uploaded a jsFiddle , it includes the jquery animation that I am successfully using (fadeIn, which is commented out), as well as the code suggested by elchininet. Update2 :我上传了一个jsFiddle ,它包含了我成功使用的jquery动画(fadeIn,已被注释掉),以及elchininet建议的代码。
Try with CSS
transitions, will save a lot of code. 尝试使用CSS
过渡,将节省大量代码。 Maybe this is not exactly that you want but I'm sure it'll helps you with your task. 也许这不是你想要的,但我相信它会帮助你完成任务。
HTML Code HTML代码
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS Code CSS代码
li{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
li.open{
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
transform: translateX(100px);
}
jQuery Code jQuery代码
$("li").on("click", function(){
$("li.open").removeClass("open");
$(this).addClass("open");
});
Here you have a jsfiddle
with your code modified and the div animations in css . 在这里你有一个jsfiddle
修改你的代码和css中的div动画。
Not sure if this is what you need or not 不确定这是否是你需要的
JS Fiddle - updated 2 JS Fiddle - 更新2
// initializing var prevID = '', divs = $('.sliding-divs'); $("li").on("click", function() { var theID, theDiv, theDivW, theCenter; // get the id letter from the li, then pick the corresponding sliding // div depending on its value. theID = $(this).attr('id'); theID = theID.replace('li-', ''); theDiv = $('#div-' + theID); // get the divs width to slide it into the center of the view theDivW = theDiv.width(); theCenter = $(window).width()/2 - theDivW/2; // if the user didn't click the link which its slide already // in the view, this to avoid sliding out and in same div. if(theID != prevID){ if (prevID == '') { // if we don't have a previously slided in div, we just slide // the just click link's div into the view theDiv.animate({'left': theCenter}, 1000); } else { // animated the previous div to the right out of the view, then // move all divs to their original position out from the left // this is because if we don't do this, an already slided div // will later be slided in from right instead in from left // because we have already changed its position. // slide the just clicked link's div into the view from left $('#div-' + prevID).animate({'left': '110%'}, 800); divs.css({'left':-(theDivW + 100)}); theDiv.animate({'left': theCenter}, 1000); } } // change the value of the id representing previously slided in div prevID = theID; });
body { overflow-x: hidden; } ul { list-style: none; padding: 0; } li { width: 100px; height: 25px; margin: 2px 0; color: white; padding: 3px; text-align: center; background-color: green; cursor:pointer; } .sliding-divs { position: absolute; width: 500px; line-height: 250px; background-color: orange; font-size: 30px; border: 2px gold solid; text-align: center; display: inline-block; top: 150px; left: -510px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <ul> <li id="li-A">item 1</li> <li id="li-B">item 2</li> <li id="li-C">item 3</li> <li id="li-D">item 4</li> </ul> <div class="sliding-divs" id="div-A"> DIV A </div> <div class="sliding-divs" id="div-B"> DIV B </div> <div class="sliding-divs" id="div-C"> DIV C </div> <div class="sliding-divs" id="div-D"> DIV D </div>
There are some minor mistakes i found on fiddle like , comma between class name. 我在小提琴上发现了一些小错误,比如类名之间的逗号。 : class="project-container,common"
: class="project-container,common"
You are hiding all div
with class
.common
, but not show it after. 您正在使用.common
class
隐藏所有div
,但之后不会显示它。 so its style
property get display:none
even if you add class
open
to that div
. 所以它的style
属性得到display:none
即使你向该div
添加了open
class
。
Here is my Updated and running code: 这是我更新并运行的代码:
$(document).ready(function() { itemsToRender = []; $('ul#project_menu li').click(function(e) { $('.common').hide(); menuItemId = (e.currentTarget.id); var projectId = getProjectId(menuItemId); console.log(projectId); $('.project-container.open').removeClass('open'); $(projectId).addClass('open'); $(projectId).show(); /* $(projectId).fadeIn('slow'); <--- THIS WORKS! But I want the slide effect instead */ }); function getProjectId(menuItemId) { if (menuItemId.indexOf('php') > 0) { return '#php-project'; } else if (menuItemId.indexOf('node') > 0) { return '#node-project'; } else if (menuItemId.indexOf('angular') > 0) { return '#angular-project'; } else if (menuItemId.indexOf('mean') > 0) { return '#mean-project'; } else if (menuItemId.indexOf('html5-css3-js') > 0) { return '#html-css-js-project'; } } });
.project-detail { float: right; max-width: 50%; margin-right: 75px; color: #fff; } #php-project { background-color:#9b59b6; margin: 30px; display:none; } #node-project { background-color:#27ae60; margin: 30px; display:none; } .project-container{ transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; } .project-container.open{ transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="project"> <ul id="project_menu" class="project_menu"> <li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li> <li id="menu-nodejs" data-projectID="node-project">NodeJS</li> </ul> <div class="project-detail"> <div id="php-project" class="project-container common"> <i class="ion-ios-close-empty close-icon js-close-icon"></i> <div classs="project-text"> <h2 class="project-label">Project title: <span class="project-name"> php project</span></h2> </div> </div> <!-- end of php-project --> <div id="node-project" class="project-container common"> <i class="ion-ios-close-empty close-icon js-close-icon"></i> <div classs="project-text"> <h2 class="project-label">Project title: <span class="project-name"> node project</span></h2> </div> </div> <!-- end of node-project --> </div> <!-- end of project-detail --> </div> <!-- end of project -->
I think you want this to work like in this fiddle 我想你希望这个像这个小提琴一样工作
HTML Code HTML代码
<div class="project">
<ul id="project_menu" class="project_menu">
<li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li>
<li id="menu-nodejs" data-projectID="node-project">NodeJS</li>
<!-- more code -->
</ul>
<div class="project-detail">
<div id="php-project">
<i class="ion-ios-close-empty close-icon js-close-icon"></i>
<div classs="project-text">
PHP project text
<!-- data about project -->
</div>
</div>
<div id="node-project">
<i class="ion-ios-close-empty close-icon js-close-icon"></i>
<div classs="project-text">
Node Project Text
<!-- data about project -->
</div>
<!-- and so on.. -->
</div>
</div>
</div>
CSS Code CSS代码
.project_menu > li{
cursor: pointer;
}
.project-detail{
width: 300px;
height: 100px;
background-color: #dedede;
overflow: hidden;
position: relative;
}
JQuery JQuery的
$(document).ready(function() {
$('.project-detail > div:first-child').css("right","0px");
itemsToRender = [];
$('#project_menu li').click(function(e) {
menuItemId = (e.currentTarget.id);
$('.common').hide();
$(getProjectId(menuItemId)).css('display', 'inline');
var value = '0px';
$(getProjectId(menuItemId)).animate({
right: '0px'
}, 800);
var req = '.project-detail > div';
$('.project-detail > div').not($(getProjectId(menuItemId))).animate({
right: '300px'
}, 800);
});
});
function getProjectId(menuItemId) {
if (menuItemId.indexOf('php') > 0) {
return '#php-project';
} else if (menuItemId.indexOf('node') > 0) {
return '#node-project';
} else if (menuItemId.indexOf('angular') > 0) {
return '#angular-project';
} else if (menuItemId.indexOf('mean') > 0) {
return '#mean-project';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.