Blur after click

sight011

sight011

Erfahrenes Mitglied
Ich hab mich in der Vergangenheit ja nie an Java-Script herangewagt.

Nun aber doch ; )

Nur habe ich gerade ein Problem.
1. Ich hab diese kleine Funtktion die auf klick den Text ein und ausblendet.

Nun würde ich aber das ein- und ausblenden durch einen Blur-Effekt ersetzen. Sprich man klickt der Text darunter wird stark verblurt. Klickt der User ein weiteres mal, wird der Text wieder normal dargestellt.


2. kann ich die Dauer der Animation beeinflussen


Bitte nicht die Lösung in einer Antwort fomrulieren, sonst verstehe ich nicht was zu was gehört. Java-Script Programmierung geht ganz ganz schwer in meinen Kopf rein ^^
 
sight011 hat gesagt.:
1. Ich hab diese kleine Funtktion die auf klick den Text ein und ausblendet.
Zum Vergrößern anklicken....
Ohne diese Funktion hier gesehen zu haben, nehme ich jetzt an, dass Du jQuery verwendest, und empfehle Dir https://api.jquery.com/category/effects/ sowie https://jqueryui.com/effect/
sight011 hat gesagt.:
2. kann ich die Dauer der Animation beeinflussen
Zum Vergrößern anklicken....
Die Effekte besitzen den Parameter duration, um die Animationsdauer zu definieren.

Aus der Liste dürfte https://api.jquery.com/animate/ recht interessant sein, um CSS-Eigenschaften zu manipulieren.

Für einen speziellen "Blur"-Effekt (Weichzeichnen) werden diverse jQuery-Plugins angeboten: http://www.jqueryrain.com/demo/jquery-blur/
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Pardon, da war ich kopflos:

https://jsbin.com/werahogusu/edit?js,output



Code: 
HTML:

<div class="button" data-target="#text" data-shown-text="Hide" data-hidden-text="Show">Hide</div>

<div id="text"> I want to hide this by pressing the button above </div>

CSS:
.button {
    display: block;
    height: 20px;
    width: 100px;
    background: lightgreen;
    text-align: center;
    padding: 5px;
    font: 15px Tahoma;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;
}
#showhide {
    display: none;
}

JS:
var button = document.querySelector('.button');
button.addEventListener('click', function(event) {
    var target = document.querySelector(button.getAttribute('data-target'));
    if (target.style.display == "none") {
        target.style.display = "block";
        button.innerHTML = button.getAttribute('data-shown-text');
    } else {
        target.style.display = "none";
        button.innerHTML = button.getAttribute('data-hidden-text');
    }
});




Und ein bekannter meinte dieses müsse ich da nun einbauen, aber wie



Code: 
['webkitFilter', 'mozFilter', 'msFilter', 'oFilter', 'filter'].forEach(function(name) {
     text.style[name] = 'blur(5px)';
});
 
sight011 hat gesagt.:
Nun würde ich aber das ein- und ausblenden durch einen Blur-Effekt ersetzen. Sprich man klickt der Text darunter wird stark verblurt. Klickt der User ein weiteres mal, wird der Text wieder normal dargestellt.
Zum Vergrößern anklicken....
sight011 hat gesagt.:
Code: 
JS:
var button = document.querySelector('.button');
button.addEventListener('click', function(event) {
    var target = document.querySelector(button.getAttribute('data-target'));
    if (target.style.display == "none") {
        target.style.display = "block";
        button.innerHTML = button.getAttribute('data-shown-text');
    } else {
        target.style.display = "none";
        button.innerHTML = button.getAttribute('data-hidden-text');
    }
});
Zum Vergrößern anklicken....
http://jsfiddle.net/spicelab/3rah12un/ nutzt filter:blur() anstelle von display:none|block.
 
Funktioniert bei mir nicht auf Chrome.

Nutzt du jquery? Das darf nur reines js sein --> damit es auf mobile nicht zu groß wird.

Gibt es auch eine Lösung ohne jquery?
 
Ok, links stand jquery aktiviert wird aber gar nicht genutzt.


... aber leider funktioniert es in der Form nur im Firefox und nicht in Chrome oder Safari.

Kann man das irgendwie erweitern?
 
Ja das mit jquery habe ich schon lange verstanden.

Aber wie bekomm ich nun diese Weiche hin ; )

Weil ich glaube es gibt nur 1% Phones mit Firefox drauf.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück