Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

JQuery Slide Effect on Anchor Click

Posted on 2011-02-20
3
1,054 Views
Last Modified: 2012-05-11
Hi all,

I have some html DIV's (sections)...

What I want to do is using JQuery I want to slide (effect) from one to the other..

Example:

<div id="div-1">
Some text here
Some Text here
<a href="#div-2">Goto div-2</a> <!--When I click on this link I need it to Slider (horizontally to div-2-->
</div>

<div id="div-2">
Some other text here
Some other Text here
</div>


<div>

Hope someone can help

Thanks

0
Comment
Question by:error77
  • 2
3 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 34938217
     $(document).ready(function() {
        $('#div-1 span').click(function() {
          var $lefty = $("#div-2");
          $lefty.animate({
            left: -$lefty.outerWidth()
          });
        });
      });


<div id="div-1">
Some text here
Some Text here
<span>Goto div-2</span>
</div>
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34938219
0
 

Author Closing Comment

by:error77
ID: 34938982
THanks a million :)
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html value of radio 14 28
Do alert on select 6 13
Button on Table, name table1 not working 4 21
Get checkbox id of the previous one selected 2 15
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question