How to add more than one button to a FadeTransition?

Question

I have a program for school trying to create a vending machine and I'm trying to get more than one button to be a bake to do a fade transition off the same transition! Is this possible or do I have to have an entirely different fade transition for each button?

FadeTransition ft = new FadeTransition();
ft.setNode(imgView1);
ft.setDuration(Duration.millis(5000));
ft.setFromValue(1.0);
ft.setToValue(0.0);
ft.setCycleCount(1);
ft.setAutoReverse(true);
ft.plat();

btn1.setOnMousePressed(e->ft.play());

I have 3 other buttons and images I want to do the same thing with but not sure if I have to make each Seperated FadeTransition or if I can add them to this one?

Answer 1

Unless the nodes are the only ones in a common parent that has no visuals, you cannot apply the transition to more than one node.

You could however bind the opacity property of the other nodes to the opacity of the animated node:

node2.opacityProperty().bind(imgView1.opacityProperty());
node3.opacityProperty().bind(imgView1.opacityProperty());

---

You could also create a Timeline with a KeyValue element for every node:

Timeline timeline = new Timeline(new KeyFrame(Duration.ZERO,
                                              new KeyValue(node1.opacityProperty(), 1d),
                                              new KeyValue(node2.opacityProperty(), 1d),
                                              new KeyValue(node3.opacityProperty(), 1d)),
                                 new KeyFrame(Duration.seconds(5),
                                              new KeyValue(node1.opacityProperty(), 0d),
                                              new KeyValue(node2.opacityProperty(), 0d),
                                              new KeyValue(node3.opacityProperty(), 0d)));

timeline.setAutoReverse(true);
timeline.play();