jQuery Forum

Toggle (slideIn / FadeOut) multiple Divs in the same place by individual menu items
[3Replies]
- 06-Nov-2014 06:10 PM
- Forum: Using jQuery
Hi everybody,
since two days I am trying different jQuery codes to get the above described result, but didn't get the result I want yet :(

Now I just hope you, the experts here, can help me out a little with that.

I've deleted my old attempts, so it's not too confusing. I'm sure it's just an easy thing for you guys and I really appreciate every help you can help me here.

Ok this is the html
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="utf-8">
6. <title>SlideIn</title>
7. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
9. <style>
10. body {
11. background-color: #000;
12. }
14. a {
15. color: #fff;
16. text-decoration: none;
17. }
19. header {
20. width:347px;
21. height:100px;
22. border: 0px solid yellow;
23. background-color: #c6c6c6;
24. margin-top: 5%;
25. margin-left: 5%;
26. }
28. footer {
29. border-top: 2px solid #C5C6C6;
30. /*
31. background-color: red;
32. */
33. bottom: 0;
34. left:0px;
35. right:0px;
36. margin-right: 5%;
37. margin-left: 5%;
38. position: absolute;
39. color: #C5C6C6;
40. }
42. footer div {
43. border-top:0px solid red;
44. /*
45. background-color: yellow;
46. */
47. width: 100%;
48. text-align: right;
49. color: #C5C6C6;
50. }
52. footer div ul {
54. }
56. footer div ul li {
57. font-size: 2em;
58. list-style-type: none;
59. display: inline;
60. padding-left: 0.5%;
61. color: #C5C6C6;
62. }
64. footer div ul li:hover {
65. color: #fff;
66. }
67. </style>
69. </head>
71. <body>
72. <header></header>
74. <content>
75. 
76. </content>
78. <footer>
79. <div>
80. <ul id="icons">
81. <a href="#"><li id="link_1">Link1</li></a>
82. <a href="#"><li id="link_2">Link2</li></a>
83. </ul>
85. </div>
86. </footer>
88. <script src="script.js"></script>
89. <script>
91. </script>
93. </body>
94. </html>
What I'd like to do is sliding up a content div when clicking one of the menu items on the bottom right side.

By clicking the same link or a Close-Link inside the wrapperDiv it should slide down again.

When the contentDiv for Link1 is visible and you click Link2, the whole wrapperDiv for Link1 should fade out and wrapperDiv for Link2 should slide up.

Hope I could explain it fair enough. Sorry for my not sooo good english, I'm a little bit out of practise.... just as I am with coding :-)

Thank you in advance!

Resize or slide-in div while hovering another
[4Replies]
- 14-Sep-2012 08:47 PM
- Forum: Using jQuery
Hey guys,
I'm trying to geht this working since a few days now but I can't get it to work how I want it.
I have two divs, one (blue) over the other (red).

When the mouse enters/hovers the red div the blue div should slide up or animate up to '0px'. When mouse leaves the read div it slides back. This part works good :-)

What does not work is:
- slow down animation speed
- start animation after 2sec of hovering. (Right now it starts directly when mouse enters)

This is my code now:
1. <!DOCTYPE html>
  <html>
  <head>
  <script src="script/jquery-1.8.1.js"></script>
  <style>
        #hover{ background-color:red; height:300px; width:50%; top:0; position:absolute; }
        #top{ background-color:blue; height:225px; width:40%; top:0; position:absolute; }
  </style>
  </head>
  <body>
      <div id="hover"></div>
      <div id="top"></div>
  
  <script>
        $("#hover").hover(function(){
            $('#top').animate({ height: "0px" }, {queue: false});
        }, function() {
            $('#top').animate({ height: "225px" }, {queue: false});
        });
  </script>
  
  </body>
  </html>
Appreciate every help!

Thanks in advance ;)

Please help: jQuery Accordeon Slider doesn't slide
[0Replies]
- 12-Apr-2012 09:51 AM
- Forum: Using jQuery
Hi erverybody,
I'm trying to build an accordeon slider, but somehow it doesn't slide like it should. I'm on since a few days now, but can't get it working as it should. Could you please take a look here?

I don't think it is a big thing.... guess I just overlook something stupid

It shall look like this one

Appreciate every help or suggestion.
Thanks in advance.

jQuery UI Slide - no complete hide?!?
[3Replies]
- 23-Feb-2011 08:11 AM
- Forum: Using jQuery
Hi everybody,

I'm very new to jQuery and now playing around a little to learn for a new project. Is it somehow possible to set the UI slide effect so that it doesn't fully hide away?

e.g. my div is width:300px I have set the distance:220px. So it doesn't completely slide in... but still the left 80px hide away after the slide. How can I set it that this stays visible?? Or is there a workaround for this??

Appreciate every help!!

Thanks in advance!

Response title

Attachments

jQuery Forum

Activity Trend