Jump to content

Jquery To Fade


newseed

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.

Link to comment
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
Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...