Jump to content


Photo

Jquery To Fade


  • Please log in to reply
3 replies to this topic

#1 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,640 posts
  • LocationTexas

Posted 27 March 2013 - 05:45 PM

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.
  • 0

#2 grabenair

grabenair

    Advanced Member

  • Member
  • PipPipPipPip
  • 361 posts
  • LocationIowa

Posted 28 March 2013 - 09:12 AM

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, 28 March 2013 - 09:27 AM.

  • 0
Standards will change. But your website needs to remain in serving its audience.
My Portfolio site

#3 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,640 posts
  • LocationTexas

Posted 28 March 2013 - 04:47 PM

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.
  • 0

#4 grabenair

grabenair

    Advanced Member

  • Member
  • PipPipPipPip
  • 361 posts
  • LocationIowa

Posted 29 March 2013 - 09:27 AM

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.
  • 0
Standards will change. But your website needs to remain in serving its audience.
My Portfolio site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

★★★★★ 5 Star Rated Web Developer Course - check it out now!