Forum PHP.pl > [JavaScript]Pomoc w zrobieniu efektu na stronie za pomocą jQuery

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Pomoc w zrobieniu efektu na stronie za pomocą jQuery

michuwsh

25.10.2017, 22:09:17

Witam koledzy i koleżanki,

Potrzebuje waszej pomocy przeszukałem dziś całe internety i nic nie znalazłem ciekawego. A mianowicie chodzi mi o przygotowanie efektu. Po kliknięciu w guzik rozwiń heading h1 ma przesunąć się w górę a pod nim ma być pokazany akapit który jest domyślnie ukryty.

Wygląda to tak w kodzie :

Kod

<div class="content">

<h1>Jakiś tam nagłówek </h1>
<a href="#">rozwin</a>
<p style="display: none;"> jakies tam lore ipsum itp .... </p>

</div>

Fajnie było by tez zmienić tekst rozwiń po rozwinięciu na zwiń ale to już szczegół.

Licze na waszą pomoc.

viking

26.10.2017, 06:14:16

Naprawdę nic nie znalazłeś? No patrz.
https://developer.mozilla.org/en-US/docs/We..._CSS_animations
http://api.jquery.com/slidetoggle/

michuwsh

27.10.2017, 07:58:10

Witam, utworzyłem coś takiego, ale mam problem bo gdy kliknę nagłówek idzie do góry ale jak po raz drugi kliknę na przycisk to nagłówek nie wraca do pierwotnego miejsca. Po za tym nadal nie wiem jak zmienic przycisk rozwin po kliknięciu na zwin. Domyślam się że trzeba tu jakiegos if napisać ale kompletnie nie wiem jak za to się zabrać. Pomocy.

Kod

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
    $("#paragraf").hide();
    $("#rozwin").click(function(){

        $("#paragraf").slideToggle("slow");
        $("#heading").css("margin-top","50px");
    });
});
</script>

<style>
h1 {
margin-top: 150px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="heading">tytuł jakiś</h1>
<a id="rozwin">rozwin</a>
<p id="paragraf" >Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego humoru czy przypadkowych słów, które nawet w najmniejszym stopniu nie przypominają istniejących. Jeśli masz zamiar użyć fragmentu Lorem Ipsum, lepiej mieć pewność, że nie ma niczego „dziwnego” w środku tekstu. Wszystkie Internetowe generatory Lorem Ipsum mają tendencje do kopiowania już istniejących bloków, co czyni nasz pierwszym prawdziwym generatorem w Internecie. Używamy zawierającego ponad 200 łacińskich słów słownika, w kontekście wielu znanych sentencji, by wygenerować tekst wyglądający odpowiednio. To wszystko czyni „nasz” Lorem Ipsum wolnym od powtórzeń, humorystycznych wstawek czy niecharakterystycznych słów.</p>

</body>
</html>

viking

27.10.2017, 08:25:19

[HTML] pobierz, plaintext 
<script>
$(function(){
    $("#paragraf").hide();
    var show = $("#paragraf").is(':visible');
    $(".toggle").on('click', function() {
        show = !show;
        var text = show ? 'ukryj' : 'pokaż';
        show ? $("#heading").addClass('show') : $("#heading").removeClass('show');;
        $(this).text(text);
        $("#paragraf").slideToggle("slow");
 
    });
});
</script>
 
<style>
h1 {
margin-top: 150px;
text-align: center;
}
h1.show {
margin-top: 50px;
}
</style>
</head>
<body>
 
 
<h1 id="heading">tytuł jakiś</h1>
<a id="rozwin" class="toggle">rozwin</a>
[HTML] pobierz, plaintext

michuwsh

27.10.2017, 08:52:18

Dzięki za gotowy kod

Jednak nie do końca jeszcze on działa kiedy zwijam akapit nagłówek h1 nie wraca do pierwotnej wysokości 150px tylko pozostaje na 50px. Chyba trzeba było by dodać zdarzenie not visible lub coś takiego .

viking

27.10.2017, 08:59:55

To ciekawe bo u mnie działa. Zresztą jakieś pierdoły byś sam mógł poszukać.

michuwsh

27.10.2017, 09:07:23

Tak masz racje przepisywałem kod a nie kopiowałem zapomniałem dodać do znaczników <style> tego : h1.show {
margin-top: 50px;
}

Dziękuje bardzo za pomoc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.