Jquery To Fade

newseed · March 27, 2013

Jquery is not my strong point but I can do enough to tinker with it to work for my need.

However, I am having trouble making this to have the slides to fade in/out.

bum psho x.com/storedev/pc/scripts/jquery-collapse/accordian.htm {remove two space)

You will see that this is not really a slideshow but instead a content slider that expands and collapse. Everything is working exactly as I hoped except for the swing effect of the images. I want it to be fade in/out.

Any suggestions?

Thanks.

grabenair · March 28, 2013

I think this might work for you with just a few adjustments. As you can tell from the jQuery library I have had this code for a while. I have used it as a starting point for simler stuff like you want. I would also fade it in for a more subtle effect. If this does not do it let me know and I will try again.

You should just have to sit the sliding effect height and add a show hide to each element to show hide what you want when clicked on.


<script type="text/javascript" src="../jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(function() {
           $("#slideup").click(function() {
               $("#theDiv").slideUp("normal");
           });
           $("#slidedown").click(function() {
               $("#theDiv").slideDown("normal");
           });
           $("#toggle").click(function() {
               $("#theDiv").slideToggle("slow");
           });
       });
   </script>
   <style type="text/css">
       div#theDiv {
           width: 250px;
           height: 180px;
           margin: 10px;
           padding: 20px;
           background: blue;
           border: 2px solid black;
           cursor: pointer;
       }
       p, span {
           font-size: 16pt;
       }
       button {
           margin: 5px;
       }
   </style>
</head>
<body>
   <p>
       Sliding an Element</p>
   <div id="theDiv">
   </div>
   <button id="slideup">Slide Up</button>
   <button id="slidedown">Slide Down</button>
   <button id="toggle">Toggle Slide</button>
</body>

I came back and added this incase you might want this as a starting point for fading also. Hope this helps, again let me if it does not.

I am thinking you can combine the two sets of code tho get the effect you want.


<script type="text/javascript" src="../jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(function() {
           $("#fadein").click(function() {
               $("#theDiv").fadeIn("normal");
           });
           $("#fadeout").click(function() {
               $("#theDiv").fadeOut("normal");
           });
           $("#fadeto3").click(function() {
               $("#theDiv").fadeTo("slow", 0.3);
           });
           $("#fadeup").click(function() {
               $("#theDiv").fadeTo("slow", 1.0);
           });
       });
   </script>
   <style type="text/css">
       div#theDiv {
           width: 250px;
           height: 180px;
           margin: 10px;
           padding: 20px;
           background: blue;
           border: 2px solid black;
           cursor: pointer;
       }
       p, span {
           font-size: 16pt;
       }
       button {
           margin: 5px;
       }
   </style>
</head>
<body>
   <p>
       Fading an Element</p>
   <div id="theDiv">
   </div>
   <button id="fadein">Fade In</button>
   <button id="fadeout">Fade Out</button>
   <button id="fadeto3">Fade To .3</button>
   <button id="fadeup">Fade To 1.0</button>
</body>

Edited March 28, 2013 by grabenair

newseed · March 28, 2013

Thanks for help. I was able to achieve this without using the accordian. I should have known better to take that approach. You idea is a good start.

bum psho x.com/newsite/default-new.html (remove two spaces) it's about halfway down the page.

grabenair · March 29, 2013

Awesome looking site. Here is an idea that you might like a jQuery adjustable back to top link. I thought of this because the page is a little long, not to long but long enough that I would add it. But that is just me.


//scroll to top link
$(document).ready(function() {
$('.top').click(function(){
	$('html, body').animate({scrollTop: 0}, 3000);
});
});

the html:

<p id="backtop" ><a class="top" href="#">AUTO SCROLL BACK TO TOP</a></p>

I just put the link in a p tag for easy positioning. In the jQuery the scrollTop: 0 is how far from top of window. The 3000 is how long. You know three sec. If you want to see this in action before trying it out. Click on the my site in my signature and go to my portfolio page. By the way the site is not done yet but close.

Sign In

Jquery To Fade

Recommended Posts

newseed

grabenair

newseed

grabenair

Join the conversation

Browse

Activity

Store

Support