Jump to content
Killersites Community
Sign in to follow this  
newseed

Jquery To Fade

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 by grabenair

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×