Develop Reference

The navagation Toggle Wont show up

Any problem with this code it wont show when I tried to click the toggle icon in responsive view in console it says:
navTogglerBtn is null
I tried to look at it but I can't find the problem. Im new in JavaScript. Thank you so much heres my code in JSFiddle code is here
const navTogglerBtn = document.querySelector(".nav-toggler"),
aside = document.querySelector(".aside-menu");
navTogglerBtn.addEventListener("click",() => {
asideSectionTogglerBtn();
})
function asideSectionTogglerBtn() {
aside.classList.toggle("open");
navTogglerBtn.classList.toggle("open");
}

You CSS code is wrong. It's .nav-toggler.open not .nav-toggler .open. And apply some transition to have smooth effect.
.aside-menu .nav-toggler {
display: flex;
left: 30px;
transition: 0.5s;
}
.aside-menu {
left: -270px;
transition: 0.5s;
}
.aside-menu .nav-toggler.open {
left: 300px;
}
.aside-menu.open {
left: 0px;
}

Changing the hide show toggle effect?

I have an element that works just fine with the following code. It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2.
#obj1{
position:fixed;
width:100px;
bottom:180px;
right:100px;
display:none;
}
$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});
but I would like to have it like this:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
I would like it to fade in, but how do I add the animation to the first script? (animation ex: .animate({"opacity": "1","bottom": "140"}, "slow");)

Here is a super simple demo of fading in an element using CSS. You can use jQuery to add the class through a click event.
// HTML
<div id="myId" class="hide">
This is div with myId
</div>
// CSS
.hide {
display: none;
}
.myId {
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
// JQUERY
$("#myId").removeClass("hide").addClass("myId");
You can see a working demo here. You'll just have to modify it to trigger on click of obj2 or where you like
EDIT - As per your comment above I have edited the pen, so now the element will be hidden on page load and then the class will be removed and the animation class added.

You would be best keeping the styles within css, and just using js to change the state (add/remove a class). The way you have the javascript is passable, but it'd be better for the class to be toggled based on itself so they can't accidentally get out of sync:
$('#obj2').on('click',function(e){
e.preventDefault();
if($('#obj1').hasClass('js-on'))
$('#obj1').removeClass('js-on');
else
$('#obj1').addClass('js-on');
});
#obj1{
position:absolute;
width:100px;
bottom:10px;
right:20px;
opacity: 0;
background-color: yellow;
padding: 1em;
transition: .5s opacity, .5s bottom;
}
#obj1.js-on {
opacity: 1;
bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>
<div id="obj1">Hi</div>

$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});
$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});
This will show obj1 by sliding when obj2 is pressed. To have it fade in instead Try,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
This toggles obj1 fading in and out.
reference:
http://api.jquery.com/fadetoggle/

Slightly confused by the question, but here's my attempt at an answer: hope it helps
$(".obj1").click(function(){
$(".obj2").css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
});
.obj1 {
display: inline-block;
padding: 10px;
background: lightgrey;
}
.obj2 {
height: 100px;
width: 100px;
background: red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="obj1">click me</div>
<div class="obj2"></div>

Unable to show and hide text with fade effect on click

I was trying to create a similar effect on up and down arrows as shown in the image below but got stuck midway because of my low javascript/jquery skills.
I can't figure out how to make the text appear and then fade away on click with color change.
Here's a link to the fiddle just in case SO code snippet doesn't work
$("span").click(function() {
$("span").css("color", "grey");
$(this).css("color", "red");
});
ul > li{
list-style:none;
}
span {
cursor: pointer;
}
.fa {
font-size: 55px;
text-indent: 200px;
margin-bottom: 20px;
margin-top:30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><span id='select1'><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></li>
<li><span id='select2'><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span></li>
</ul>
So far none of the answers have worked for me so I am asking for more help on this.
I saw this effect on reddit and I've tried many times and spent so much time but failed to get the similar effect. I'd really appreciate it if anybody could help me understand and create the exact effect.

here is my version of the solution, https://jsfiddle.net/hnk1vw6x/33/
see some explanations below.
HTML
<div class="padding-container">
<span id="rating">0</span>
<a class="arrow fa fa-arrow-up" data-animation-text="Nice!" data-value="1"></a><br/>
<a class="arrow fa fa-arrow-down" data-animation-text="Troll" data-value="-1"></a>
</div>
CSS
.padding-container {
width: 60px;
margin: 100px;
}
#rating {
float: right;
font-size: 2.1em;
width: auto;
}
a.arrow {
display: inline-block;
position: relative;
cursor: pointer;
}
a.arrow:after {
content: attr(data-animation-text);
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: auto;
opacity: 0;
}
a.arrow.fa-arrow-up {
color: #FF0000;
}
a.arrow.fa-arrow-down {
color: #0000FF;
}
a.arrow.fa-arrow-up:after {
bottom: 100%;
}
a.arrow.fa-arrow-down:after {
top: 100%;
}
a.arrow.animate.fa-arrow-up:after {
animation-name: slideup, bounce;
animation-duration: 3s;
}
a.arrow.animate.fa-arrow-down:after {
animation-name: slidedown, bounce;
animation-duration: 3s;
}
#keyframes slideup {
from {
bottom: 100%;
opacity: 1;
}
to {
bottom: 300%;
opacity: 0;
}
}
#keyframes slidedown {
from {
top: 100%;
opacity: 1;
}
to {
top: 300%;
opacity: 0;
}
}
#keyframes bounce {
from {
font-size: 1em;
}
3% {
font-size: 1.25em;
}
6% {
font-size: 0.75em;
}
9% {
font-size: 1em;
}
}
JavaScript
function arrowAnimationEndHandler(e) {
var arrow = e.target;
if (typeof arrow === 'undefined') {
return;
}
arrow.className = arrow.className.replace(/\banimate\b/,'');
}
function arrowClickHandler(e) {
var arrow = e.target;
if (typeof arrow === 'undefined') {
return;
}
arrow.className = arrow.className.replace(/\banimate\b/,'');
setTimeout(function () {
arrow.className += ' animate';
}, 0);
ratingUpdateBusinessLogic(arrow);
}
function ratingUpdateBusinessLogic(arrow) {
if (typeof ratingElement === 'undefined') {
return;
}
var ratingDelta = parseInt(arrow.getAttribute('data-value'), 10);
ratingElement.innerHTML = parseInt(ratingElement.innerHTML, 10) + ratingDelta;
}
var ratingElement = document.getElementById("rating");
var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
arrows[i].addEventListener("animationend", arrowAnimationEndHandler, false);
arrows[i].addEventListener("click", arrowClickHandler, false);
}
Now little bit of explanation:
The problem is quite complex and author is asking for a complete solution rather then explanation of one aspect which is not clear. I decided to give an answer because then I can outline the software design steps, which might
help someone else to solve another complex problem.
In my opinion the key to complex tasks is the ability to split them in smaller, which in turn are easier to approach. Let's try to split this task into smaller pieces:
We need to draw two arrows and a number.
Up and down arrows should have different colors.
We need to draw the arrow tooltips/labels next to them.
We need to animate the arrow tooltips/labels on user interaction.
We need to apply our business logic (change the rating) on user input.
Now let's try to solve those smaller problems one by one:
We need to draw two arrows and a number. Well, HTML is our friend here and below is a trivial html code. I'm using font-awesome to draw the actual arrow icons.
<div class="padding-container">
<span id="rating">0</span>
<a class="arrow fa fa-arrow-up"></a>
<a class="arrow fa fa-arrow-down"></a>
</div>
We want our arrows to be positioned in a certain way on the screen, let's make the arrows inline-blocks, and add a line-break between them, also add some CSS to line up:
.padding-container {
width: 60px;
margin: 100px;
}
#rating {
float: right;
font-size: 2.1em;
width: auto;
}
a.arrow {
display: inline-block;
cursor: pointer;
}
Our arrows should have different colors. Again trivial CSS here. The colors are not 100% like in the gif, but that is the question of making the screenshot and picking the right color - you can do it yourself.
a.arrow.fa-arrow-up {
color: #FF0000;
}
a.arrow.fa-arrow-down {
color: #0000FF;
}
We need to draw the arrow tooltips/labels next to them. Ok, that starts to be interesting. Let's use the :after pseudo-element to draw our tooltips, because those tooltips are part of representation (and not content), they don't need to be reflected in the html structure.
I use :after and not :before because font-awesome is using before for the arrow icon rendering ;) Let's also use absolute positioning to place them relative to the actual arrows. That gives us the following CSS:
a.arrow {
position: relative;
}
a.arrow:after {
content: attr(data-animation-text);
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: auto;
}
a.arrow.fa-arrow-up:after {
bottom: 100%;
}
a.arrow.fa-arrow-down:after {
top: 100%;
}
Now, our tooltips are rendered just next to the arrows, and we have the possibility to control the content of them through html, e.g. for translation purposes.
Tooltips are also centered relative to the arrows.
We need to animate the arrow tooltips/labels on user interaction.
We can animate elements by javascript and we can also do that via CSS. Doing it via CSS is way more efficient, so unless we need to support really old browsers, let's stick to CSS.
We need to implement two animations, one is tooltip fading together with lift/drop and the second one is the tooltip bounce.
Let's what CSS has to offer:
a.arrow:after {
opacity: 0;
}
a.arrow.fa-arrow-up:after {
animation-name: slideup, bounce;
animation-duration: 3s;
}
a.arrow.fa-arrow-down:after {
animation-name: slidedown, bounce;
animation-duration: 3s;
}
#keyframes slideup {
from {
bottom: 100%;
opacity: 1;
}
to {
bottom: 300%;
opacity: 0;
}
}
#keyframes slidedown {
from {
top: 100%;
opacity: 1;
}
to {
top: 300%;
opacity: 0;
}
}
#keyframes bounce {
from {
font-size: 1em;
}
3% {
font-size: 1.25em;
}
6% {
font-size: 0.75em;
}
9% {
font-size: 1em;
}
}
Now we see a nice label animation straight after we load the page. All that was done without a single line of JavaScript so far.
But the task says we need to animate on user interaction.
Ok, let's now add some javascript. But before that we need a possibility to trigger the animation, let's trigger it using CSS class: animate, our CSS then changes like
a.arrow.animate.fa-arrow-up:after {
animation-name: slideup, bounce;
animation-duration: 3s;
}
a.arrow.animate.fa-arrow-down:after {
animation-name: slidedown, bounce;
animation-duration: 3s;
}
Note added animate class. If we now manually add the class to the HTML - we will see the animation again. But we need that to happen on user click, well that is easy:
function arrowClickHandler(e) {
var arrow = e.target;
arrow.className += ' animate';
}
var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
arrows[i].addEventListener("click", arrowClickHandler, false);
}
Now, if we load the page and click the arrow - we will see the animation, but only once. We need to find a way to reset it. Let's remove the animate class on animation finish.
function arrowAnimationEndHandler(e) {
var arrow = e.target;
if (typeof arrow === 'undefined') {
return;
}
arrow.className = arrow.className.replace(/\banimate\b/,'');
}
var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
arrows[i].addEventListener("animationend", arrowAnimationEndHandler, false);
}
Now, we can click the arrow and see an animation as many times as we want. But there is a problem, we can't restart the animation if it is going already.
For that we need a little trick:
function arrowClickHandler(e) {
var arrow = e.target;
if (typeof arrow === 'undefined') {
return;
}
arrow.className = arrow.className.replace(/\banimate\b/,'');
setTimeout(function () {
arrow.className += ' animate';
}, 0);
}
as long as we remote the animate class - we give the browser a chance to execute it's code and stop the animation and then we add the animate class again.
We need to apply our business logic (change the rating) on user input.
Here is no rocket science, we read current value and update it according to the values we have assigned to arrows:
function arrowClickHandler(e) {
...
ratingUpdateBusinessLogic(arrow);
}
function ratingUpdateBusinessLogic(arrow) {
if (typeof ratingElement === 'undefined') {
return;
}
var ratingDelta = parseInt(arrow.getAttribute('data-value'), 10);
ratingElement.innerHTML = parseInt(ratingElement.innerHTML, 10) + ratingDelta;
}
var ratingElement = document.getElementById("rating");
UPDATE:
solution with glyphicons would require replacing css/html classes fa fa-arrow-up and fa fa-arrow-down with corresponding glyphicon classes, i.e.: glyphicon glyphicon-arrow-up and glyphicon glyphicon-arrow-down. After little thinking I also decided to unbind the custom css from library classes and added custom arrow-up and arrow-down classes to simplify the icon library replacement:
<a class="arrow arrow-up glyphicon glyphicon-arrow-up" data-animation-text="Sick!" data-value="1"></a>
<a class="arrow arrow-down glyphicon glyphicon-arrow-down" data-animation-text="Suck!" data-value="-1"></a>
CSS
a.arrow.arrow-up {
.
}
a.arrow.arrow-down {
...
}
a.arrow.arrow-up:after {
...
}
a.arrow.arrow-down:after {
...
}
a.arrow.animate.arrow-up:after {
...
}
a.arrow.animate.arrow-down:after {
...
}

You can use jquery animate to get that effect. Try this
EDIT:
for exact effect use jquery easing plugin and give
easeOutElastic easing effect
$("#select1").click(function() {
$(".nice").css("display","block");
$(".nice").animate({
top: -10,
}, 500, "easeOutElastic", function() {
// Animation complete.
$(".nice").css({"opacity":"1", "top":"10px","display":"none"});
});
});
$("#select2").click(function(){
$(".troll").css("display","block");
$(".troll").animate({
top: 130,
}, 500,"easeOutElastic", function(){
$(".troll").css({"opacity":"1", "top":"120px","display":"none"});
});
});
ul > li{
list-style:none;
}
span {
cursor: pointer;
}
.fa {
font-size: 55px;
text-indent: 200px;
margin-bottom: 20px;
margin-top:30px;
}
.nice{
position:absolute;
top:10px;
text-indent :190px;
display:none;
}
.troll{
position:absolute;
top:120px;
text-indent : 190px;
display:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<ul>
<li>
<p class="nice">Nice</p>
<span id='select1'><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></li>
<li><span id='select2'><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span>
<p class="troll">Troll</p>
</li>
</ul>

Just Add the text and show/hide it with the help of fadeout and fadein property of Jquery.
Check your updated fiddle
$("span").click(function() {
if($(this).attr('id')=='select1')
{
$("#downText").fadeOut(300);
$("#upText").fadeIn(300);
}
else
{
$("#upText").fadeOut(300);
$("#downText").fadeIn(300);
}
$("span").css("color", "grey");
$(this).css("color", "red");
});
$("fa").click(function(){
$("fa").fadeTo("slow", 0.15);
});

Add a setTimeout to make the text fade out after a few milliseconds:
$("span").click(function() {
$("span").css("color", "grey");
$(this).css("color", "red");
});
$("#select1").click(function() {
$("#down").fadeOut(300);
$("#up").fadeIn(300);
setTimeout(function() {
$("#up").fadeOut(300); // fade out the up text
}, 300); // delay of 0.3s before fading out
});
$("#select2").click(function() {
$("#up").fadeOut(300);
$("#down").fadeIn(300);
setTimeout(function() {
$("#down").fadeOut(300); // fade out the down text
}, 300); // delay of 0.3s before fading out
});
jsFiddle: https://jsfiddle.net/qze7mqj4/16/
I also added a position:absolute; to the fading text so that it doesn't make the arrows "jump" around.
You can read more about setTimeout here: http://www.w3schools.com/jsref/met_win_settimeout.asp
Basically it tells the browser to execute a function after a specified number of milliseconds, in this case, we tell the browser to fadeOut() the text after 300ms.

Hovering over one div changes another's img

I need to change an image of one div while hovering over another. So far i have this
$('#button').on({
'hover': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
DEMO
But it doesn't work..
EDIT While it works in fiddle, the solution does not work in my local file.

Hover is deperecated with latest versions of jQuery. it is divided into two events mouseenter and mouserleave. use those event it will be helpful
As of 1.9, the event name string "hover" is no longer supported as a
synonym for "mouseenter mouseleave". This allows applications to
attach and trigger a custom "hover" event. Changing existing code is a
simple find/replace, and the "hover" pseudo-event is also supported in
the jQuery Migrate plugin to simplify migration. Reference
$('#button').on({
'mouseenter': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
$('#button').on({
'mouseleave': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/some_other.png');
}
});
If you still want to use hover events then there is direct hover function provided by jQuery, with reference
$( "td" ).hover(
function() {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}, function() {
// change to default on hover out
}
);

Looks like you need to change it on mouseover and reset on mouseout. If you use data-* attribute it will be easier.
$('#button').hover(function() {
var img = $('#ekranasStatic').data('toggle-src');
$('#ekranasStatic').attr('src', img);
}, function() {
var img = $('#ekranasStatic').data('original-src');
$('#ekranasStatic').attr('src', img);
});
.img {
/*** TURI BUT 850 PX **/
position: absolute;
margin-left: 520px;
top: 110px;
z-index: 99;
}
#button {
width: 50px;
height: 70px;
display: block;
position: absolute;
top: 296px;
left: 1120px;
background: url("http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/knopkes_zpsp3qr4xyn.png") no-repeat;
z-index: 2200;
cursor: pointer;
}
#button:focus {
outline: none;
}
#button:hover {
animation: knopke 0.1s steps(2);
animation-fill-mode: forwards;
background-position: 0 0;
}
#keyframes knopke {
to {
background-position: -100px;
opacity: 1;
}
}
#ekranasStatic {
width: 735px;
height: 602px;
display: block;
position: absolute;
top: 120px;
left: 375px;
z-index: 10000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<img class="img" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/galerija3_zpszlnkhebp.png">
<div id="button"></div>
<div id="ekranai">
<img id="ekranasStatic" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-original-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-toggle-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png"
/>
</div>
Updated Fiddle

change this
$('#button').on({
'hover': function(){
to :
$('#button').hover({ function(){ });

try this :
$('#button').on('hover', function () {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
);
Js Fiddle Updated

How to slide images to the left using jquery

I tried sliding two images from right to left. The slide is working but only displaying the first image. Please what's the cause? This is my code:
<script type="text/javascript">
var n=0;
var nmax=2;
function timer()
{
window.setInterval(function ()
{
n+=1;
if(n>nmax)
{
n=0;
$('#slideImage').css('left','0');
}
$('#slideImage').css('left',(n)*(1366)*(-1)+'px');
},2500);
}
$(document).ready(function(e) {
timer();
});
</script>
css
.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto;
margin-left: auto; position: relative; display: inline-table;
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s;
-webkit-transition: linear 0.75s 0.2s; }
and here is html
<div class="w_n">
<div class="w_n2" id="slideImage">
<div class="hd_p">
<img name="shift" src="image/bn2.jpg" class="wn_p" />
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div>
</div>
<img name="shift" src="image/bn3.jpg" class="wn_p" />
</div>
</div>

If you use jQuery anyway, why not use its animate function?
$(document).ready(function(e) {
$('.wn_p').animate({left: '-200px'}, {duration: 2500});
});
You can set a lot of options, so if you show some html and elaborate on your needs, we could better match the result you're expecting.
The fact only one image is shown could be a CSS thing. You're using an ID, but should use a class if there's more than one image.
Edit: I changed the selector to the class you added. You propably figured that out by now, but it should work this way.

For lots of cycle image effects it might be worthwhile checking out this jQuery Cycle Plugin: http://jquery.malsup.com/cycle2/
THis is a basic pager that might be of interest to start you off: http://jquery.malsup.com/cycle2/demo/pager.php
Here are lots of demos that might help: http://jquery.malsup.com/cycle2/demo/

use:
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var n=0,switcher=1; // Note change
var nmax=2;
function timer()
{
window.setInterval(function ()
{
if(switcher){ // Note change
n+=1;
}
else{ // Note change
n--; // Note change
} // Note change
if(n>=nmax) // Note change
{
switcher=0; // Note change
}
if(n<=0) // Note change
{
switcher=1; // Note change
}
$('#slideImage').animate({left:''+(n)*(1366)*(-1)+'px'},500); // Note change
},2500);
}
$(document).ready(function(e) {
timer();
});
</script>
<style type="text/css">
.des_p{height: 400px; width: 1366px;float: left; }
.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto;
margin-left: auto; position: relative; display: inline-table;
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s;
-webkit-transition: linear 0.75s 0.2s; }
</style>
</head>
<body>
<div class="w_n">
<div class="w_n2" id="slideImage">
<div class="hd_p">
<img name="shift" src="image/bn2.jpg" class="wn_p" />
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div>
</div>
<img name="shift" src="image/bn3.jpg" class="wn_p" style="position:absolute; top:0px; left:2732px;" /><!-- Note change -->
</div>
</div>
</body>
</html>
actually problem was not in your js but it was in your css due to low height overflow was hidden..
i fixed that by using positioning of element in css..
according to your last comment i've updated answer for sliding images in both direction.
please pay attention in the lines marked by Note change at end.
hope it'll help you. cheers !!

try it
$(document).ready(function() {
$('#slideImage').animate({left: '-200px'},2500);
});